HTML+CSS 基础布局(案列一)
2018-06-24 00:37:53来源:未知 阅读 ()
刚html刚讲完马上就接着css,周末的任务就是高仿案例,结果有点遭
图文布局 | 代码 |
css(内部样式)
html
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>报刊</title> <style type="text/css"> body{ background-color: gray; } .all{ width: 980px; height: 1386px; margin: 0 auto; padding-left: 49px; padding-right: 49px; background-color: white; } /*导航栏*/ .nav{ height: 63px; /*background-color: blue;*/ } .nav .logo{ float: left; width: 110px; height: 61px; background-color: red; } .nav .logo .title{ font-size: 12px; color: #ffffff; text-align: center; padding-top: 45px; } .nav .time{ float: right; font-size: 12px; color: #d45d5c; padding-top: 47px } .nav .nav-hr{ width: 980px; } /* news1 */ .news1{ height: 301px; margin-top: 30px; } .news1 .img1{ float: left; width: 641px; height: 301px; background: url(images/123.jpg) no-repeat center; /*background-color: yellow;*/ } .news1 .img1 .left-tm{ width: 191px; height: 301px; background-color:rgba(0,0,0,0.3); /*设置透明度*/ float: left; } .news1 .img1 .right-tm{ width: 191px; height: 301px; background-color:rgba(0,0,0,0.3); /*设置透明度*/ float: right; } .news1 .about{ float: right; width: 230px; height: 301px; /*background-color: pink;*/ } .news1 .about .lab1{ font-size: 24px; color: #000000; line-height: 40px; text-decoration: underline; } .news1 .about .lab2{ font-size: 24px; color: #000000; line-height: 40px; text-decoration: underline; /*添加下划线*/ } .news1 .about .lab3{ font-size: 12px; color: #676767; line-height: 10px; } .news1 .about .lab4{ font-size: 116px; color: #75b86b; line-height: 120px; text-decoration: underline; /*添加下划线*/ } .news1 .about .lab5{ font-size: 55px; color: #cc8091; } .news1 .about .end-lab{ width: 120px; height: 30px; float: right; padding-top: 15px; color: #cc8091; } /* news2 */ .news2 { height: 250px; margin-top: 30px; /*background-color: green;*/ } .news2 .n2-what{ float: left; width: 200px; height: 250px; /*background-color: red;*/ } .news2 .n2-what .what1{ font-size: 16px; line-height: 16px; font-weight: bold; color: #d2994f; text-decoration: underline; } .news2 .n2-what .what2{ font-size: 12px; color: #231815; line-height: 16px; } .news2 .n2-when{ float: left; width: 200px; height: 250px; padding-left: 20px; /*background-color: red;*/ } .news2 .n2-when .when1{ font-size: 16px; line-height: 16px; font-weight: bold; color: #d2994f; text-decoration: underline; /*添加下划线*/ } .news2 .n2-when .when2{ font-size: 12px; color: #231815; line-height: 16px; } .news2 .n2-how{ float: left; width: 200px; height: 250px; padding-left: 20px; /*background-color: red;*/ } .news2 .n2-how .how1{ font-size: 16px; line-height: 16px; font-weight: bold; color: #d2994f; text-decoration: underline; /*添加下划线*/ } .news2 .n2-how .how2{ font-size: 12px; color: #231815; line-height: 16px; } /* news3 */ .news-left{ width: 50%; height: 600px; margin-top: 30px; padding-right: 30px; /*background-color: red;*/ } .news-left .n-l-div{ height: 170px; /*background-color: green;*/ } .news-left .n-l-div .n-l-title1{ font-size: 72px; font-weight: bold; /*粗体字*/ color: #f5e327; } .news-left .n-l-div .n-l-title2{ font-size: 42px; font-weight: bold; line-height:16px; color: #11456b; } .news-left .n-l-div .n-l-title3{ font-size: 33px; font-weight: bold; color: #11456b; } .news-left .n-l-div2{ width: 70px; height: 70px; float: left; font-size: 70px; color: #f5e327; } .news-left .n-l-div3{ width: 420px; float: left; } .news-left .n-l-div4{ width: 300px; height: 270px; float: left; } .news-left .n-l-div5{ height: 270px; float:left; }.news-left .n-l-div6{ float:left; } .news-left .t{ font-size: 12px; color: #767777; line-height: 16px; } .news-right{ width: 50%; height: 600px; margin-top: -600px; float: right; /*background-color: yellow;*/ } .news-right .n-r-div1{ width: 100%; height: 275px; background: url(images/789.png) no-repeat center; /*background-color: blue;*/ } .news-right .n-r-div1 .img-tm{ float: left; width: 100%; height: 61px; line-height: 61px; text-align: center; background-color: rgba(0,0,0,0.5); /*position: relative;*/ padding-top: 211px; } .news-right .n-r-div1 .n-r-lab1{ font-size: 26px; color: #ffffff; } .news-right .n-r-div1 .n-r-lab2{ font-size: 12px; color: #72b16a; word-spacing: 140%; } .news-right .n-r-div2{ width: 95%; height: 310px; margin: 10px; background-color: skyblue; } .news-right .n-r-div2 .div2-1{ padding-top: 10px; font-size: 16px; line-height:20px; color: #5a5b5b; } .news-right .n-r-div2 .div2-2{ width: 60%; height: 60%; float: left; margin-top: 20px; color: #ffffff; background-color: red; } .news-right .n-r-div2 .div2-2 .div2-2-1{ width: 100px; height: 150px; padding-top:50px; float: left; font-size: 110px; text-align: center; /*background-color: green;*/ } .news-right .n-r-div2 .div2-2 .div2-2-2{ padding-top: 50px; } .news-right .n-r-div2 .div2-2 .div2-2-2 .sp-1{ font-size: 21px; line-height: 24px; } .news-right .n-r-div2 .div2-2 .div2-2-2 .sp-3{ font-size: 12px; line-height: 6px; } .news-right .n-r-div2 .div2-3{ padding:10px; } .news-right .n-r-div2 .div2-3 .bb{ font-size: 72px; color: #d45d5c; } .news-right .n-r-div2 .div2-3 .ll{ font-size: 14px; color: #5a5b5b; line-height: 16px; } .footer .footer-item{ float: right; font-size: 12px; color: #d45d5c; } </style> </head> <body> <div class="all"> <div class="nav"> <div class="logo"> <div class="title"> <span>ife.baidu.com</span> </div> </div> <div class="time"> <span>2016.03</span> </div> <!--添加横线--> <hr style="border:2px solid #938e8c" class = "nav-hr"> </div> <div class="news1"> <div class="img1"> <!--要来构造背景为半透明的盒子--> <div class="left-tm"></div> <div class="right-tm"></div> </div> <div class="about"> <hr style="border:2px solid #cc8091" class="about-hr"> <span class="lab1">ABOUT</span><br> <span class="lab2">TECHNOLGE</span><br> <span class="lab3">About techoologe About techoologe About techoologe </span><br> <span class="lab4"><em>700</em></span><br> <span class="lab5">3.2</span> <div class="end-lab"> <span class="lab6">WEB</span><br> <span class="lab7">html css js</span> </div> </div> </div> <div class="news2"> <div class="n2-what"> <span class="what1">What</span><br><br> <span class="what2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br> </div> <div class="n2-when"> <span class="when1">When</span><br><br> <span class="when2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br> </div> <div class="n2-how"> <span class="how1">How</span><br><br> <span class="how2">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span><br><br> <div class="h-wwh"> <span class="what">What.......................%30</span><br> <span class="when">When.......................%50</span><br> <span class="how">How.........................%20</span><br> </div> </div> </div> <div class="news-left"> <div class="n-l-div"> <span class="n-l-title1"><em>THE</em></span> <span class="n-l-title2">TECHNOLGE OF FRONT</span><br> <span class="n-l-title3">前端技术邻域</span> <hr style="border:2px solid #11456b" class="n-l-hr"> </div> <div class="n-l-div2">剑</div> <div class="n-l-div3 t"> hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf </div> <div class="n-l-div4 t"> hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 </div> <div class="n-l-div5"> <img src="images/456.jpeg" alt="图片加载失败" width="180" height="270"> </div> <div class="n-l-div6 t"> hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf hello 剑 bigerf </div> </div> <div class="news-right"> <!-- image --> <div class="n-r-div1"> <div class="img-tm"> <!-- <hr style="border:44px solid #72b16a" class="n-r-hr"> --> <span class="n-r-lab1">前端技术</span> <span class="n-r-lab2"><em>前端技术保你前途无忧</em></span> </div> </div> <div class="n-r-div2"> <div class="div2-1"> <!-- <img src="images/789.png" width="450" height="200"> --> <ul> <li>HTML.............................................................................结构</li> <li>CSS................................................................................样式</li> <li>JavaScript....................................................................交互</li> </ul> </div> <div class="div2-2"> <div class="div2-2-1">O</div> <div class="div2-2-2"> <span class="sp-1"><em>ONE TWO</em></span><br> <span class="sp-1"><em>THREE FORE FIVE</em></span><br> <span class="sp-3">hello bigerf hello bigerf hello bigerf hello bigerf</span> </div> </div> <div class="div2-3"> <span class="bb">“</span> <span class="ll"> hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello bigerf hello</span> <span class="bb">”</span> </div> </div> </div> <div class="footer"> <!--横线--> <hr style="border:2px solid #938e8c" class = "footer-hr"> <div class="footer-item"> <span>ife.baidu.com</span> </div> </div> </div> </body> </html> |
陌陌说:刚开始的时候就是个打击,可后来学习更深了,觉得这还是冰山一角的一角而已
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:自定义背博客园博客背景图片
- DIV居中的经典方法 2020-06-13
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
- HTML基础01 2020-06-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash