仿南讯信息官网首页--整体页面布局和导航布局
官网地址:
http://nx888.com/cn/
首页,我们需要创建自己的文件夹,在项目文件夹中,创建 静态资源文件夹,分别是scc, image, js和index.html
其次,在css文件夹中,创建pub.css index.css
紧接着在index.html,将外部样式表引入到页面中,代码如下所示:
<!-- 引入外部样式 --> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/pub.css">
然后开始写代码元素,
第一步先写大盒子元素,快捷写法 :
.top+.nav+.hd+.bajue+.jj+.zw#kk1+.siyun+.zw#kk2+.case+footer
第二部写 m2 oline 属性
第三步写页面的标题分栏,快捷写法 :
nav>ul>li*8>a[target="-blank"]
标题分栏上下部位要写开始于结束。
代码如下:
<!-- 代码开始 --> <!-- 第一步先写大的盒子 如下 .top+.nav+.hd+.bajue+.jj+.zw#kk1+.siyun+.zw#kk2+.case+footer--> <!-- .top+.nav+.hd+.bajue+.jj+.zw#kk1+.siyun+.zw#kk2+.case+footer --> <!-- top 开始 --> <div class="top"> </div> <!-- top 结束 --> <!-- nav 开始 --> <div class="nav"> <!-- 第二步些 m2 oline --> <div class="m2 oline"> <!-- 第三步写页面的标题分栏 --> <!-- --> <nav> <ul> <!-- 标题栏 --> <li><a href="" target="-blank">首页</a></li> <li><a href="" target="-blank">全网营销</a></li> <li><a href="" target="-blank">技术研发</a></li> <li><a href="" target="-blank">运营管理</a></li> <li><a href="" target="-blank">客户案例</a></li> <li><a href="" target="-blank">解决方案</a></li> <li><a href="" target="-blank">新闻中心</a></li> <li><a href="" target="-blank">关于我们</a></li> </ul> </nav> </div> </div> <!-- nav 结束 --> <!-- 写上标签的结束与开始 --> <!-- hd 开始 --> <div class="hd"></div> <!-- hd 结束 --> <!-- bajue 开始--> <div class="bajue"></div> <!-- bajue 结束--> <!-- jj 开始--> <div class="jj"></div> <!-- jj 结束--> <!-- kk1 开始--> <div class="zw" id="kk1"></div> <!-- kk1 结束--> <!-- siyun 开始--> <div class="siyun"></div> <!-- siyun 结束--> <!-- kk2 开始--> <div class="zw" id="kk2"></div> <!-- kk2 结束--> <!-- case 开始--> <div class="case"></div> <!-- case 结束--> <footer></footer>
然后在pub文件夹中写样式,先写通符 *{} 样式,紧接着写其他样式,其他样式的布局方向与index.html中盒子布局的方向一致,写其他小盒子的样式标签,
代码如下:
/* 通符 */ *{ margin: 0; padding: 0; } /* pub.css的属性样式与index.css里的盒子位置相对应 */ body,td,th{ /* yanse */ color: #333; /* 字体 */ font-size: 12px; font-family: "Microsoft YaHei", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; } body{ /* 边距布局方向:上右下左 */ /* 上外边距 */ margin-top: 0; /* 右外边距 */ margin-right: 0; /* 下外边距 */ margin-bottom: 0; /* 左外边距 */ margin-left: 0; /* 背景yanse */ background-color: #F0EAE6; } *:hover{ transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .left,.left,.le,.l,.center,.cen,.ce,.c{ float: left; } .right,.rig,.ri{ /* 浮动 */ float: right; } .clear{ float: none; clear: both; } .top{ /* 内容高 */ height: 120px; /* 背景颜色 */ background-color: #F0EAE6; } .nav{ height: 50px; background-color: #336699; } .hd{ height: 350px; /* 溢出隐藏 */ overflow: hidden; background-color: aqua; } .bajue{ height: 400px; background-color: coral; } .jj{ height: 436px; background-color: brown; } .zw{ height: 380px; /* 溢出隐藏 */ overflow: hidden; background-color: hotpink; } .siyun{ height: 470px; background-color: #336699; } .case{ height: 330px; background-color: blueviolet; } .footer{ height: 350px; background-color: #353535; } .oline{ /* 轮廓线 */ outline: 1px dashed red; } .m2{ width: 1130px; /* 右外边距 */ margin-right: auto; /* 左外边距 */ margin-left: auto; } .nav ul,.nav li{ /* 外边距 */ margin: 0; /* 内边距 */ padding: 0; /* 去除列表项li前面的小图标 */ list-style-type: none; } .nav li{ width: 140px; height: 50px; /* 行高 */ line-height: 50px; /* 浮动 */ float: left; } nav>ul>li{ /* 文本水平居中 */ text-align: center; /* 相对定位 */ position: relative; } .nav li a{ /* 通透 */ width: 100%; height: 50px; /* 将行元素转成块元素 */ display: block; font-size: 16px; /* 去除下划线 */ text-decoration: none; text-align: center; color: #532323; } .nav a:hover{ /* 鼠标悬停颜色 */ background-color: #003366; }
此处代码样式写法在网址中通过开发者面板能够索取到
预览图如下:
注意 :1、注意index.html文件夹是跟css平级的,注意文件夹的创建
2、遇到了文件夹索取不到的问题,通过开发者工具面板,找到control键去发现问题并及时解决