HTML连载82-努比亚界面顶部区域和广告区域
程序员文章站
2022-05-17 09:20:09
一、制作顶部区域 提示一个快捷键:(1)ctrl+/ /*.top .top_login>li{*/ /*list-style: none;*/ /*float:right;*/ /*}*/ (2)ctrl+shift+/ /*.top .top_login>li{ list-style: none ......
一、制作顶部区域
提示一个快捷键:(1)ctrl+/
/*.top .top_login>li{*/ /*list-style: none;*/ /*float:right;*/ /*}*/
(2)ctrl+shift+/
/*.top .top_login>li{ list-style: none; float:right; }*/
这两种注释的快捷键,一个每行都注释,一个整体注释。
二、开始设计努比亚界面的头部信息
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--顶部区域--> <div class="top"> <div class="top_in"> <div class="top_left"> <h1><a href="#" title="努比亚"></a></h1><!--a标签里面的title属性,就是用于当鼠标放到a标签上面的时候会显示的文字--> </div> <div class="top_right"> <ul class="top_nav"> <li><a href="#">首页</a></li> <li><a href="#">商城</a></li> <li><a href="#">产品</a></li> <li><a href="#">应用</a></li> <li><a href="#">服务</a></li> <li><a href="#">体验店</a></li> <li><a href="#">社区</a></li> </ul> <ul class="top_login"> <!--这里有一个注意点,我们想要使用的右浮动,所以三个li标签应该倒叙写,因为先写的先浮动哦--> <li><a href="#">注册</a></li> <li><a href="#">登录</a></li> <li><a href="#"></a></li> </ul> </div> </div> </div> <!--广告区域--> <div class="banner"></div> <!--内容区域--> <div class="content"></div> <!--底部区域--> <div class="footer"></div> </body> </html>
/*顶部区域*/ .top{ height:60px; width:100%;/*也就是和父元素一样宽,这里使用百分比的形式,使得网页扩大减小都不会变形*/ background-color: black; } .top .top_in{ width: 1200px; margin:0 auto; height:100%; /*background-color: yellow;*/ } .top .top_left{ float:left; height:100%; width:190px; /*background-color: pink;*/ } .top .top_left>h1{ width: 100%; height: 100%; } .top .top_left>h1>a{ display: inline-block; width: 100%; height: 100%; background:url("../image/nubia_logo.png"); background-size: 190px 60px;/*设置图片大小正好适配div块的大小*/ } .top .top_right{ float:right; height: 100%; width: 800px; /*background-color: pink;*/ } .top .top_nav{ float:left; width:550px; height: 100%; /*background-color: skyblue;*/ } .top .top_nav>li{ float:left; list-style: none; } .top .top_nav>li>a{ font-size:25px; font-weight: bold;/*给文字加粗*/ line-height:60px; color:white;/*文字的颜色,直接是color*/ margin-left:20px;/*这是给文字添加空隙*/ text-decoration:none;/*去掉文字的下划线*/ } /*.top .top_nav>li>a:hover{!*移动鼠标上去变化颜色*!*/ /*color:#e82c07;*/ /*}*/ .top .top_login{ float:right; width: 150px; height: 100%; /*background-color: skyblue;*/ } .top .top_login>li{ list-style: none; float:right; margin-right:10px; } .top .top_login>li>a{ font-size:20px; font-weight:bold; line-height:60px; color:white; text-decoration:none; } .top ul>li>a:hover{/*移动鼠标上去变化颜色*/ color:#e82c07; /*这里我们使用.top ,top_login>li>a:hover而使用了ul来替代top_login这个可以说是代码的重构,我们希望 li标签里的文字鼠标悬浮都变色,这样我们把父层级一改,可以省略代码,在后续编程中这些都是隐形的小技巧 */ } .top .top_login>li:nth-child(3){ width: 30px; height: 37px; background:url("../image/nubia_person.png"); margin-top:10px; } /*广告区域*/ .banner{ height: 800px; width: 100%; background-color: green; } /*内容区域*/ .content{ height: 1883px; width: 100%; background-color: blue; } /*底部区域*/ .footer{ }
三、源码:
d194_csswritingformat.html
项目:nubia
地址:
https://github.com/ruigege66/html_learning/blob/master/d194_csswritingformat.html
https://github.com/ruigege66/html_learning/tree/master/nubia
2.csdn:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包
上一篇: 简单了解mysql语句书写和执行顺序