相思湖学院 15级Bootstrap课程
2017-11-21 09:19提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> #left{ height: 100px; background-color: blue; } #right{ height: 100px; background-color: green; } #left-1{ height: 500px; background-color: orange; } #right-1{ height: 300px; background-color: lightblue; } #right-2{ height: 300px; background-color: lightgrey; } #right-3{ height: 200px; background-color: grey; } #conter{ height: 100px; background-color: lightblue; } </style> </head> <body> <div class="container-fluid mybody"> <div class="col-md-3" id="left"></div> <div class="col-md-9" id="right"></div> <div class="col-md-6" id="left-1"></div> <div class="col-md-3" id="right-1"></div> <div class="col-md-3" id="right-2"></div> <div class="col-md-6" id="right-3"></div> <div class="col-md-12" id="conter"></div> </div> </body> <script type="">js/jquery-3.2.1.js</script> <script type="js/bootstrap.min.js"></script> </html>
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="width=device-width,initial-scale=1"> <title>Title Page</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> #header{margin-top: 20px;} #left{ font-size:30px; color:#337abb; } #right{ text-decoration: none; } #button button{ background-color:#efb73e; color:white; height:35px;width:60px; } #img img{ width:160px; height:160px; border-radius:5px; margin-bottom:5px; } #green{ height:221px; background-color:#2ecc71; margin-bottom:25px; } #red{ height:211px; background-color:#dd4814; margin-bottom:25px; } #orange{ height:211px; background-color:#ffa500; margin-bottom:25px; } #bottom{ width:100%; height:100px; background-color:#cccccc; margin-top:53px; line-height:100px; text-align:center; font-weight:bold; } #text1{ height:215px; width:410px; border:1px solid #dfdfdf; } #text2{ height:215px; width:410px; border:1px solid #dfdfdf; } #text3{ height:215px; width:410px; border:1px solid #dfdfdf; } </style> <body> <!-- 头部 --> <div class="container"> <div class="row" id="header"> <div class="col-md-3" id="left">Terry Lee</div> <div class="col-md-2 col-md-offset-1" id="offset1"></div> <div class="col-md-5" id="right"> <div class="col-md-2" id="button"><button>联系</button></div> <div class="col-md-5" id="information"> <a>terry.lee@gmail.com 13901239073<br>北京市朝阳区劲松三区</a> </div> <div class="col-md-2" id="img"><img src="photo.png"> </div> </div> </div> <hr style="height:2px;background-color:#dfdfdf;margin-bottom:43px;"> <!-- 第一部分 --> <div class="row"> <div class="col-md-6" id="green"> <h3 style="color:white">个人介绍</h3> <a style="color:white"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus asperiores eum consequatur hic rem earum repudiandae dicta! Est officiis similique fugiat quod quibusdam rerum ipsum eos soluta tempore cupiditate! Accusantium? </a> </div> <div class="col-md-1" id="offset2"></div> <div class="col-md-5" id="text1"> <h3>教育背景</h3> <a style="color:black"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione enim adipisci minima perspiciatis ad nesciunt iure asperiores voluptatem neque aperiam molestias cupiditate facilis a eveniet iste sapiente ab repellendus dignissimos. </a> </div> </div> <!-- 第二部分 --> <div class="row"> <div class="col-md-6" id="red"> <h3 style="color:white">个人技能</h3> <a style="color:white">HTML/CSS/Javascript Java/J2EE 数据库 Photoshop/UI</a> </div> <div class="col-md-1" id="offset2"></div> <div class="col-md-3" id="text2"> <h3>工作经验</h3> <a style="color:black"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolorem mollitia repellendus. Magni laudantium placeat repudiandae tempore iure deleniti obcaecati. Architecto delectus doloremque quo. Dicta ratione vero eos pariatur itaque. </a> </div> </div> <!-- 第三部分 --> <div class="row"> <div class="col-md-6" id="orange"> <h3 style="color:white">语言水平</h3> <a style="color:white"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum nostrum pariatur facere laborum sint possimus assumenda nemo qui et quidem enim quibusdam a consequatur eius eveniet dolorum exercitationem asperiores quo. </a> </div> <div class="col-md-1" id="offset2"></div> <div class="col-md-3" id="text3"> <h3>个人爱好</h3> <a style="color:black">骑马 旅游<br><br>美食<br><br>音乐</a> </div> </div> <!-- 尾部 --> <div class="row"> <div class="col-md-12" id="bottom"> <a style="color:white;">关注-微博</a> </div> </div> </div> </body> <script src="js/jquery-3.2.1.js"></script> <script src="js/bootstrap.min.js"></script>
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="windth=device-width,initial-scale=1"> <title>Title page</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> #logo{ height: 100px; background-color:blue; } #menu{ height: 100px; background-color: green; } #left{ height:500px; background-color: orange } #inner_left{ height: 300px; background-color: lightblue; } #inner_right{ height: 300px; background-color: lightgrey; } #inner_bottom{ height: 200px; background-color: black; } #footer{ height: 100px; background-color: lightblue; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-3" id="logo"></div> <div class="col-md-9" id="menu"></div> </div> <div class="row"> <div class="col-md-6" id="left"></div> <div class="col-md-6" id="right"> <div class="row"> <div class="col-md-6" id="inner_left"></div> <div class="col-md-6" id="inner_right"></div> <div class="col-md-12" id="inner_bottom"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12" id="footer"></div> </div> </body> <script scr="js/jquery-3.2.1.js"></script> <script scr="js/bootstrap.min.js"></script> </html>
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(二)】栅格系统实现响应式简历 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【栅格系统(一)】栅格系统实现页面布局 的任务作业。