项目前期筹备
筹备工具
ps(切片工具)+ Vs code或其它的开发工具+chorm浏览器
筹备文件
创立根目录 根目录外面创立html文件 css文件夹 image文件夹 js文件(目前用不上)
css书写程序
布局流程
难点
搜寻局部
html
<div class="search "> <input type="text" id="" value="输出关键词" /> <button></button> </div>css
search input { float: left; height: 40px; width: 340px; padding-left: 20px; border: 1px solid #00a4ff; border-right: none; color: #cececf; outline: none;}.search button { float: left; width: 50px; height: 42px; border: none; cursor: pointer; background: url(../images/search_03.png) center;}侧边导航栏局部
html
<!-- 侧边导航栏模块 --> <div class="side-nav"> <ul> <li><a href="#">前端开发<span>></span></a></li> <li><a href="#">后端开发<span>></span></a></li> <li><a href="#">挪动开发<span>></span></a></li> <li><a href="#">人工智能<span>></span></a></li> <li><a href="#">商业预测<span>></span></a></li> <li><a href="#">云计算&大数据<span>></span></a> </li> <li><a href="#">运维&设计<span>></span></a></li> <li><a href="#">UI设计<span>></span></a></li> <li><a href="#">产品<span>></span></a></li> </ul> </div>css
.side-nav { float: left; width: 160px; height: 420px; padding: 0px 15px; background-color: rgba(0, 0, 0, 0.3);}.side-nav li { line-height: 45px; /* 留神：在此处考验浮动的元素与兄弟元素之间的关系 */}.side-nav li a { color: #ffffff; font-size: 14px;}.side-nav li a:hover { color: blue;}.side-nav li span { float: right;}侧边栏广告局部
如何让侧边栏广告紧挨着版心呢？
答：应用定位，先走版心的一半，而后再走版心的一半加本身宽度即可
精品举荐局部
小斜杠能够应用伪元素选择器 也能够应用边框或者间接应用|即可
html
<!-- 精品举荐star --> <div class="good container"> <h4>精品举荐</h4> <ul> <li>| <a href="#"> jquery</a></li> <li> |<a href="#"> spark</a> </li> <li> |<a href="#"> MySQl</a> </li> <li> |<a href="#"> javaWeb</a> </li> <li> |<a href="#"> WEB</a> </li> <li> |<a href="#"> PHP</a> </li> </ul> <a href="#">批改趣味</a> </div> <!-- 精品举荐end -->css
/* 精品举荐star */.good { height: 60px; line-height: 60px; margin-top: 10px; background-color: #ffffff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}.good h4 { float: left; margin: 0 30px; font-size: 16px; color: #00a4ff;}.good ul { float: left;}.good ul li { float: left; color: #bfbfbf;}.good li a { margin: 0px 30px; font-size: 16px; color: #5a5a5a;}.good a { float: right; color: #00a4ff; font-size: 14px; margin: 0px 30px;}/* 精品举荐end */
源码：pan.baidu.com/s/1IqD9Glj2…