2018/11/12 CSS部分
css的选择器
基本选择器
注：不管是id还是类名字，尽量不要数字开头，好像识别不了
- 元素选择器
<title>元素选择器</title>
<style>
div{
font-size: 40px;
color: red;
}
</style>
- 类选择器
<title>类选择器</title>
<style>
.class名字(注意不能数字开头){
font-size: 40px;
color: red;
}
</style>
- id选择器
<title>id选择器</title>
<style>
#id名字{
font-size: 40px;
color: red;
}
</style>
其他选择器
- 层级选择器
<title>层级选择器</title>
<style>
div p{
font-size: 40px;
color: red;
}
</style>
- 属性选择器
<style>
input[type="button"]{
font-size: 40px;
background-color: red;
}
</style>
css引入方式
- 内部引入
直接在<head></head>里面设置<style></style>
上面的示例就是内部引用
- 行内引用：直接再<div>里面设置style
<div style="font-size:80px; color:aqua;">
南京邮电大学计算机院22
</div>
- 外部引用：写一个css文件，然后将这个文件链接并且代替<style></style>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
其中style.css文件内容就是之前的div
div{
font-size: 90px;
color: #FF0000;
}
下面做个小练习，用div+css重构之前的html网站首页，如下图所示：
源代码如下所示：
<!-- 1:如何将框居中？ padding：设置一个值，上右下左全部是这个，如果设置两个值，上下和左右；所以用margin：aotom就可以居中了；-->
<!-- 2：浮动之后第一个往最右边走了？ 应该是float：left，向左滑动； -->
<!-- 3：如何微调：检查元素，然后点击，上下方向键调像素值； -->
<!-- 4:框里插入的图片如果太大了，直接在img里面设置height； -->
<!-- 5:盒子模型：padding、margin可以选择单边，然后扩展的时候总体宽度会变大，需要同步调小框的大小。其中padding是内容和框的距离，margin是内容框与外框的距离 -->
<!-- 6:ul li { display:inline}设置列表在一行里 -->
<!-- 7:如果ul li 冲突了,可以在单独的ul里设置style -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#biggest {
border: 1px solid red;
width: 1300px;
height: 2000px;
margin: auto;
}
#firstdiv {
border: 1px solid green;
width: 1300px;
height: 50px;
}
.first {
border: 1px solid green;
width: 431px;
height: 50px;
float: left;
}
#first3 {
border: 0px;
height: 30px;
margin-top: 20px;
margin-left: 10px;
width: 421px;
}
ul li {
display: inline
}
#lifirst {
font-size: 20px;
color: red;
}
.seconddiv {
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: black;
}
#threediv {
border: 1px solid red;
width: 1300px;
}
#fourdivTop {
border: 1px solid red;
width: 1300px;
height: 30px;
padding-top: 20px;
}
#fourdivButtom {
border: 1px solid red;
width: 1300px;
height: 553px;
}
#fourdivButtomLeft {
border: 1px solid red;
width: 200px;
height: 550px;
float: left;
}
#fourdivButtomRight {
border: 1px solid red;
width: 1096px;
height: 550px;
float: left;
}
#fourdivButtomRightTopBig {
border: 1px solid red;
width: 544px;
height: 275px;
float: left;
}
.fourdivButtomRightSmall {
border: 1px solid red;
width: 180px;
height: 275px;
float: left;
}
#Last {
border: 1px solid red;
width: 1300px;
height: 100px;
}
</style>
</head>
<body>
<!-- 总体框架，最大的div -->
<div id="biggest">
<!-- 第一层div 嵌套三个小div 浮动-->
<div id="firstdiv">
<div class="first"><img src="../img/logo2.png" height="48px" /></div>
<div class="first"><img src="../img/header.png" height="48px" /></div>
<div class="first" id="first3">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!-- 第二层div -->
<div class="seconddiv">
<ul id="ul-1">
<a href="#">
<li id="lifirst" style="color: white;">首页</li>
</a>
<a href="#">
<li style="color: white;">手机数码</li>
</a>
<a href="#">
<li style="color: white;">家用电器</li>
</a>
<a href="#">
<li style="color: white;">箱包</li>
</a>
<a href="#">
<li style="color: white;">保健</li>
</a>
<a href="#">
<li style="color: white;">奢侈品</li>
</a>
</ul>
</div>
<!-- 第三层div -->
<div id="threediv">
<img src="../img/1.jpg" width="1300" />
</div>
<!-- 第四层div -->
<div id="fourdiv">
<div id="fourdivTop">
<font size="5"> 最新商品</font>
<img src="../img/title2.jpg" height="20px" />
</div>
<div id="fourdivButtom">
<div id="fourdivButtomLeft">
<img src="../img/big01.jpg" height="550px" width="200px" />
</div>
<div id="fourdivButtomRight">
<div id="fourdivButtomRightTop">
<div id="fourdivButtomRightTopBig">
<img src="../img/middle01.jpg " width="544px" height="275px" />
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
</div>
<div id="fourdivButtomRightButtom">
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
<div class="fourdivButtomRightSmall">
<a href="#"><img src="../img/small03.jpg" width="130px" height="200px" /></a>
<br />
<a href="#">电饭煲</a>
<br />
<a href="#">$400</a>
</div>
</div>
</div>
</div>
</div>
<!-- 第五层div -->
<div id="Last">
<ul>
<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>
</div>
</div>
</body>
</html>
扫一扫
7904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
