其他简单的CSS属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
/*--------背景相关的------*/
#d1{
background-color: navajowhite;
height: 300px;
width: 800px;
/*1.背景图
* 如果背景图大于盒子的大小，背景图能显示多少就显示多少
* 如果背景图小于盒子的大小，就会平铺（重复显示）
*/
background-image: url(img/logo.png);
/*2.是否平铺*
*
*/
background-repeat: no-repeat;
/*3.设置背景图的位置
* background-position:x y;
* x: letf/center/right/坐标值
* y: top/center/bottom/坐标值
*/
/*background-position: 100px 100px ;*/
background-position: center;
/*4.同时设值
* background: 图片地址 是否重复 x y
* background: 图片地址 是否重复 x y 背景颜色
*/
background: url(img/icon.ico) no-repeat center top chartreuse;
}
/*----------列表-----------*/
li{
background-color: saddlebrown;
float: left;
margin-right: 20px;
}
/*选择器为列表/li都可以*/
ul{
float: left;
background-color: royalblue;
/*1.设置符号样式
* disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)
*/
list-style-type:disc;
/*2.设置图片的符号*/
list-style-image: url(img/icon.ico);
/*3.设置符号的位置
* outside(li标签的外边), inside(li标签的里面)
*/
list-style-position: outside;
}
/*--------文字相关----------*/
p{
/*1.文字大小*/
font-size: 20px;
/*2.文字颜色*/
color: blueviolet;
/*3.设置字体名*/
font-family: "book antiqua";
/*4.设置字体粗细*/
/*取值:100-900,normal, bold,bolder*/
font-weight:900;
/*5.字体倾斜*/
font-style: italic;
/*6.内容的对齐方式*/
/*center,left,right*/
text-align: left;
background-color: yellow;
/*7.设置行高
* 文字一行的高度（当文字只有一行的时候设置行高和标签的高度一样，可以让文字垂直居中）
*/
height: 500px;
line-height: 40px;
/*8.文字修饰*/
/*
* none：去掉文字修饰
* underline: 添加下划线
* line-through: 添加删除线
* overline: 添加上划线
*/
text-decoration: underline;
/*9.首行缩进
* 注意单位是em -- 空格
*/
text-indent: 4em;
/*10.字间距*/
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="d1">
<!--<img src="img/bg.png" style="width: 100%; height: 300px;"/>-->
</div>
<ul>
<li id="l1">Python</li>
<li><a href="">H5</a></li>
<li>JAVA</li>
<li>测试</li>
</ul>
<p>
已矣乎！寓形宇内复几时？<br />曷不委心任去留？胡为乎遑遑欲何之？<br />富贵非吾愿，帝乡不可期。<br />怀良辰以孤往，或植杖而耘耔。<br />登东皋以舒啸，临清流而赋诗。<br />聊乘化以归尽，乐夫天命复奚疑！
</p>
</body>
</html>
京东网页：
- 主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东登录</title>
<!--小图标-->
<link rel="icon" href="img/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/content.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
</head>
<body>
<!--header部分-->
<div class="head_father">
<div class="head_content">
<a href=""><img src="img/logo.png"/></a>
<span id="">欢迎登录</span>
<div class="head_right">
<img src="img/q-icon.png"/>
<a href="">登录页面，调查问卷</a>
</div>
</div>
</div>
<div class="head2">
<div class="head2_content">
<img src="img/warning.png"/>
<span>
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
</span>
</div>
</div>
<!--content部分-->
<div class="log_father">
<div class="login">
<h2>密码登录</h2>
<img src="img/1.png" class="img1" />
<div class="users">
<img src="img/2.png" class="img2" />
<input type="text" name="user" id="user" value="" placeholder="请输入用户名" />
</div>
<div class="pwd">
<img src="img/3.png" class="img3" />
<input type="password" name="password" id="password" value="" placeholder="请输入密码" />
</div>
<div class="logbutton">
<input type="submit" name="log" id="log" value="登 录" />
</div>
<div class="icon">
<a href=""><img src="img/weibo.png" class="img4" /></a>
<a href=""><img src="img/zhifubao.png" class="img5" /></a>
</div>
<div class="bottom">
<a href="">忘记密码</a>
<a href="">忘记会员名</a>
<a href="">免费注册</a>
</div>
</div>
</div>
<!--footer部分-->
<div class="footer_1">
<a href="">关于我们</a> |
<a href="">联系我们</a> |
<a href="">人才招聘</a> |
<a href="">商家入驻</a> |
<a href="">广告服务</a> |
<a href="">手机京东</a> |
<a href="">友情链接</a> |
<a href="">销售联盟</a> |
<a href="">京东社区</a> |
<a href="">京东公益</a> |
<a href="">English Site</a>
</div>
<div class="footer_2">
<span>Copyright © 2004-2018 京东JD.com 版权所有</span>
</div>
</body>
</html>
- header.css
.head_father{
width: 100%;
height: 115px;
}
.head_content{
height: 115px;
width: 70%;
margin: 0 auto;
}
.head_content img{
position: absolute;
height: 60px;
margin-top: 28px;
float: left;
}
.head_content span{
/*float: left;*/
font-size: 20px;
position: absolute;
font-size: 25px;
margin-top: 50px;
margin-left: 200px;
}
.head_right{
width: 200px;
height: 30px;
float: right;
}
.head_right img{
width: 20px;
height: 15px;
position: absolute;
margin-top: 95px;
}
.head_right a{
position: absolute;
margin-top: 90px;
margin-left: 25px;
text-decoration: none;
}
.head_right a:hover{
text-decoration: underline;
color: red;
}
.head2{
background-color: #FFF8F0;
width: 100%;
height: 40px;
}
.head2_content{
width: 1050px;
margin: 0 auto;
}
.head2_content img{
position: absolute;
margin-top: 10px;
}
.head2_content span{
position: absolute;
margin-top: 10px;
margin-left: 30px;
color: lightslategray;
}
.head2_content span a{
text-decoration: none;
color: red;
}
.head2_content span a:hover{
text-decoration: underline;
}
- content.css
*{
margin: 0px;
padding: 0px;
}
/*body{
background: url(../img/background.jpg) no-repeat;
background-position: center;
background-attachment: fixed;
}*/
.log_father{
height: 600px;
background: url(../img/background.jpg) no-repeat center;
position: relative;
}
.login{
height: 500px;
width: 500px;
background-color: rgb(233,233,242);
position: absolute;
left: 50%;
margin-left:200px ;
top: 50%;
margin-top:-250px ;
}
h2{
margin-left: 30px;
margin-top: 40px;
float: left;
}
.img1{
float: right;
}
.users{
position: absolute;
float: left;
left: 50%;
margin-left: -182px;
margin-top: 110px;
}
.img2{
float: left;
}
#user{
height: 60px;
width: 300px;
font-size: 20px;
border: none;
}
.pwd{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 210px;
}
.img3{
float: left;
}
#password{
height: 58px;
width: 300px;
font-size: 20px;
border: none;
}
.logbutton{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 310px;
}
#log{
width: 360px;
height: 55px;
border: none;
cursor: pointer;
color: white;
font-size: 20px;
background-color: red;
}
#log:hover{
background-color: royalblue;
}
.icon{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 410px;
width: 200px;
}
.img5{
float: right;
}
.bottom{
position: absolute;
left: 50%;
margin-left: -32px;
margin-top: 450px;
width: 300px;
}
.bottom a{
float: left;
padding-right: 20px;
font-size: 13px;
text-decoration: none;
}
- footer.css
.footer_1{
text-align: center;
padding-top:10px ;
}
.footer_1 a{
text-decoration: none;
color: black;
font-size: 15px;
}
.footer_1 a:hover{
text-decoration: underline;
color: red;
}
.footer_2{
text-align: center;
padding-top:20px ;
font-size: 13px;
}
网页效果：
1.png
网友评论