本文探讨了CSS在网页设计中的应用，重点介绍了如何利用`ctrl+f`进行查找操作，以及`ctrl+g`快捷键实现快速定位，提升网页开发效率。
css
/*样式*/
/*css初始化*/
/*body {
height: 3000px;
}*/
* {
margin: 0;
padding: 0; /*清除内外边距*/
}
ul {
list-style: none; /*去掉列表样式小点*/
}
.clearfix:before, .clearfix:after { /*清除浮动*/
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
a {
color: #050505;
text-decoration: none; /*取消下划线*/
}
input {
border: 0; /*所有的表单边框为0*/
box-sizing: border-box; /*css盒子模型 border 和 padding 都包含到 width 里面去*/ /*对我来说重点记！！！*/
}
.container { /*因为我们的 版心 宽度都是1200 都要居中对齐 我们就声明一个公共类 以后在需要版心与居中对齐将其掉过来即可！！！*/
width: 1200px;
margin: 0 auto; /* 让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。*/
}
/*css初始化结束*/
body {
background-color: #f3f5f7; /*整个页面的背景色*/
}
header {
height: 100px;
/*background-color: skyblue;*/
overflow: hidden; /*解决内外边距和并（塌陷）问题*/
/*border-bottom: 5px solid purple;*/ }
nav {
width: 1366px; /*宽度暂且定为1366*/
height: 42px;
/*background-color: purple;*/
margin: 26px auto; /* 盒子水平居中对齐 */
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px; /*这个行高给父亲，行高会继承*/
margin-left: 50px;
}
.navbar ul li {
float: left; /*让首页 课程这个一行显示*/
/*line-height: 42px; 父亲给过了所以儿子这个不用写了*/
}
.navbar li a { /*行内元素尽量不要给上下的padding值，给左右即可*/
padding: 0 10px; /*上下为0，左右为8*/
display: block; /*a是行内元素，给高需要转换块级*/
height: 42px; /*高度有了之后会垂直继承*/
}
.navbar li a:hover {
border-bottom: 2px solid #00a4ff; /*鼠标放入有底边框*/
}
/*搜索框部分*/
.search {
width: 415px; /* 360+50*/
height: 38px;
border: 1px solid #f3f5f7;
/*margin-left: 0 10px 0 100px; 自己瞎添的*/
float: right;
}
.search input[type=text] { /*属性选择器 type为text的文本框*/
width: 341px;
height: 35px;
padding-left: 20px;
float: left;
}
.search input[type=submit] {/*属性选择器 type 为 submit 的文本框*/
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(1.png) center center no-repeat;
}
/*搜结*/
/*个开*/
.personal {
float: right;
height: 42px;
line-height: 42px; /* 这个行高给父亲，行高会继承*/
margin: 0 15px 0 35px; /*上0 右15 下0 左35*/
}
.personal img {
margin: 0 8px;
}
/*个人中心结束*/
/*banner start*/
.banner { /*通栏不用给宽*/
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(bj.gif) 0 0 no-repeat;
position: relative; /*子绝父相*/
}
.slidebar {
height: 420px;
width: 190px;
background: rgba(0, 0, 0, 0.4); /*盒子背景半透明*/
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px;
/*a是行内元素，没有大小需要转换*/
display: block;
/*height: 45px;*/
/*行高等于高文字垂直居中*/
line-height: 45px;
/*单行垂直居中 根据经验，很多情况下，有了行高就可以不用给高度 因为行高会自然而然撑开盒子 */
}
.slidebar li a:hover{ /*链接伪类 a:hover 中间没有空格*/
color: #00a4ff
}
.slidebar li a span {
float: right;
font-family: arial; /* 一般情况下我们的符号都用这个 */
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
line-height: 50px; /*垂直居中行高等于高*/
background-color: #9bceea;
text-align: center; /*文字水平居中*/
color: #fff;
font-weight: 700; /*文字加粗*/
letter-spacing: 2px; /*设置字间距*/
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
/*background-color: purple;*/
margin: 0 auto;
border-bottom: 1px solid #CCC;
padding-top: 12px;
/*一个盒子有宽高给了paddi值会撑开盒子！！！*/
box-sizing: border-box;
}
.timetable dd:last-child { /*结构伪类选择器 选择最后一个孩子 but要求这个孩子是dd的孩子*/
border: 0;
}
.timetable dd h4 {
font-size: 16px
font-weight: normal; /*让粗体不变粗*/
color: #4e4e4e;
}
.timetable dd h4:hover {
background-color: skyblue;
}
.timetable dd p {
font-size: 14px;
color: #a5a5a5;
}
.timetable dd a { /*a是行内元素*/
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center; /*文字水平居中*/
line-height: 38px;
color: #00a4ff;
font-weight: 700; /*文字加粗 700 不要给单位*/
}
.timetable dd a:hover { /* 自添的*/
background-color: #00a4ff;
color: #fff;
}
/*小圆点模块*/
.circle {
width: 180px;
height: 22px;
/*background-color: #CCC;*/
position: absolute;
bottom: 10px;
left: 50%; /*父盒子宽度的一半*/
margin-left: -90px; /*水平居中算法*/
}
.circle li { /* 0011 权重*/
float: left;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
margin: 6px 8px; /* 上下6 左右8*/
border-radius: 50%;
}
.circle .current {
width: 19px;
border-radius: 5px;
background-color: #fff;
}
/*banner end*/
/*精品推荐模块 start*/
.recommend {
height: 60px;
line-height: 60px;
background-color: #fff;
margin-top: 8px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
/*盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
}
.recommend a {
padding: 0 30px;
border-right: 1px solid #ccc;
}
.recommend a:hover {
color: #00a4ff
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:last-child {
color: #00a4ff;
border: 0;
float: right;
font-size: 14px;
}
.recom-products {
margin-top: 35px;
}
.recom-hd {
height: 40px;
/*background-color: pink;*/
}
.recom-hd h4{
float: left;
color: #494949;
}
.recom-hd a{
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.recom-hd a:hover{
color: #00a4ff;
}
/*精品推荐头部部分*/
.recom-bd ul li { /*可能需要修改*/
width: 228px;
height: 270px;
background-color: #fff;
overflow: hidden; /*溢出的部分隐藏*/
/*box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影*/
box-shadow: 0 2px 2px rgba(0, 4, 25, 0.3); /*影子不占位置*/
float:left;
margin-right: 15px;
margin-top: 15px;
}
.recom-bd ul li:nth-child(5n) { /*5n n从0开始 0123 5n就是5的倍数*/
margin: 0;
margin-top: 15px;
}
.recom-bd li h5,
.recom-bd li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd li h5 {
font-size: 14px;
line-height: 22px; /*行高*/
font-weight: normal; /*不加粗*/
}
.recom-bd li p {
font-size: 12px;
color: #999;
}
.recom-bd p span {
color: ff7c2d;
}
/*页面低部分*/
footer {
height: 270px;
background-color: #fff;
margin-top: 100px;
}
.footer-in {
padding-top: 30px;
}
.footer-l {
float: left;
}
.footer-l p {
font-size: 12px;
line-height: 18px;
color: #999;
margin-top: 20px;
}
.footer-l a {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
font-size: 16px;
color: #00a4ff;
line-height: 33px;
margin-top: 15px;
text-align: center;
}
.footer-l a:hover {
background-color: skyblue;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl{
float: left; /* 这是左浮动 让向右浮动的整体内向左浮动*/
width: 225px;
}
.footer-r dt {
font-size: 16px;
height: 30px;
}
.footer-r dd {
font-size: 12px;
height: 20px; /*高度剩余法 文字默认左上角对齐*/
}
.footer-r dd a:hover {
color: #00a4ff;
text-decoration: underline; /*添加下划线*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
</style>
</head>
<body>
<!-- 结构 -->
<!-- 页面头部分 -->
<header>
<!-- nav部分 -->
<nav>
<!-- logo部分 -->
<div class="logo">
<img src="E:\ccccccccccccccccc\wyr\图片\images\logo.png" alt="">
</div>
<!-- 导航栏部分 -->
<div class="navbar">
<ul>
<li><a href="#">首页</a></li> <!-- 无法给宽否者长宽不一，所以给左右padding值 -->
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索框部分 -->
<div class="search">
<form action=""> <!-- 为了方便选择器选择 加from action="" -->
<input type="text" name="" placeholder="输入关键词">
<!-- placeholder占位符 内容输入自动清除默认值 -->
<input type="submit" value="">
</form>
</div>
<!-- 个人中心 -->
<div class="personal">
<a href="#">个人中心<img src="2.gif"></a>
<a href="#"><img src="3.png">领域</a>
</div>
</nav>
</header>
<!-- banner部分 -->
<div class="banner">
<div class="banner-in container">
<!-- 左侧导航栏 侧边栏-->
<div class="slidebar">
<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="#">ul设计 <span>></span> </a></li>
<li><a href="#">产品 <span>></span> </a></li>
</ul>
</div>
<!-- 1.小盒子的布局可div盒子然后上面一个div头部低下在建一个大div，div里在分成4个模块 -->
<!-- 2.用dr 上面是dt下面是dd 4个 -->
<!-- 小课表部分 -->
<dl class="timetable">
<dt>我的课表</dt>
<dd>
<h4>继续学习 HTML</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 Java语言</h4>
<p>等待学习-使用对象</p>
</dd>
<dd>
<a href="#">全部课程</a>
</dd>
</dl>
<ul class="circle">
<li class="current"></li> <!-- 当前的li -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- 多类名的使用 先执行banner-in 在执行 container -->
</div>
<!-- 精品推荐 -->
<div class="recommend container"> <!-- 版心要居中 版心居中对齐 调一个类就能把一个块做出来 container -->
<!-- 一般是li里面的border a 不过直接放a也可-->
<!-- 修改让a垂直居中 让父亲就行 -->
<a href="#">精品推荐</a>
<a href="#">jquery</a>
<a href="#">spart</a>
<a href="#">mysql</a>
<a href="#">javaweb</a>
<a href="#">mysql</a>
<a href="#">javaweb</a>
<a href="#">修改兴趣</a>
</div>
<!-- 精品推荐大模块 -->
<div class="recom-products container">
<div class="recom-hd"> <!-- 头部 -->
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<div class="recom-bd clearfix"> <!-- 精品推荐的主体部分 -->
<ul>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
<li>
<img src="bp.jpg" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练</h5>
<p><span>高级</span> 1125人在学习</p>
</li>
</ul>
</div>
</div>
<!-- 页面底部 -->
<footer>
<div class="container footer-in">
<div class="footer-l">
<img src="E:\ccccccccccccccccc\wyr\图片\images\logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大小和机构合作提供课程。<br>
2017年XTCG lnc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载APP</a>
</div>
<div class="footer-r">
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会 </a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="#">如何注册</a></dd>
<dd><a href="#">如何选择</a></dd>
<dd><a href="#">如何拿到毕业证</a></dd>
<dd><a href="#">学分是什么</a></dd>
<dd><a href="#">考试</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作机构</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
</div>
</div>
</footer>
</body>
</html>
ctrl+f 查找
ctrl+g 快速定位
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
