CSS其他屬性:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
/*--------背景相關(guān)的------*/
#d1{
background-color: navajowhite;
height: 300px;
width: 800px;
/*1.背景圖
* 如果背景圖大于盒子的大小，背景圖能顯示多少就顯示多少
* 如果背景圖小于盒子的大小泣矛，就會平鋪（重復(fù)顯示）
*/
background-image: url(img/logo.png);
/*2.是否平鋪*
*
*/
background-repeat: no-repeat;
/*3.設(shè)置背景圖的位置
* background-position:x y;
* x: letf/center/right/坐標(biāo)值
* y: top/center/bottom/坐標(biāo)值
*/
/*background-position: 100px 100px ;*/
background-position: center;
/*4.同時(shí)設(shè)值
* background: 圖片地址 是否重復(fù) x y
* background: 圖片地址 是否重復(fù) 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.設(shè)置符號樣式
* disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號)
*/
list-style-type:disc;
/*2.設(shè)置圖片的符號*/
list-style-image: url(img/icon.ico);
/*3.設(shè)置符號的位置
* outside(li標(biāo)簽的外邊), inside(li標(biāo)簽的里面)
*/
list-style-position: outside;
}
/*--------文字相關(guān)----------*/
p{
/*1.文字大小*/
font-size: 20px;
/*2.文字顏色*/
color: blueviolet;
/*3.設(shè)置字體名*/
font-family: "book antiqua";
/*4.設(shè)置字體粗細(xì)*/
/*取值:100-900,normal, bold,bolder*/
font-weight:900;
/*5.字體傾斜*/
font-style: italic;
/*6.內(nèi)容的對齊方式*/
/*center,left,right*/
text-align: left;
background-color: yellow;
/*7.設(shè)置行高
* 文字一行的高度（當(dāng)文字只有一行的時(shí)候設(shè)置行高和標(biāo)簽的高度一樣粱檀，可以讓文字垂直居中）
*/
height: 500px;
line-height: 40px;
/*8.文字修飾*/
/*
* none：去掉文字修飾
* underline: 添加下劃線
* line-through: 添加刪除線
* overline: 添加上劃線
*/
text-decoration: underline;
/*9.首行縮進(jìn)
* 注意單位是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>
已矣乎甲棍！寓形宇內(nèi)復(fù)幾時(shí)椰棘？<br />曷不委心任去留？胡為乎遑遑欲何之蒙袍？<br />富貴非吾愿其兴，帝鄉(xiāng)不可期。<br />懷良辰以孤往浸赫，或植杖而耘耔闰围。<br />登東皋以舒嘯，臨清流而賦詩既峡。<br />聊乘化以歸盡羡榴，樂夫天命復(fù)奚疑！
</p>
</body>
京東登陸
jd.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京東-歡迎登錄</title>
<link rel="stylesheet" href="./css/jd.css">
<link rel="icon" href="img/ic.ico" >
<!-- <link rel="icon" mask="" sizes="any">-->
</head>
<body>
<div id="header">
<div class="h-top">
<div class="icon" id="icon">
<img src="./img/logo.png">
<img src="./img/l-icon.png">
</div>
<a >登陸頁面, 調(diào)查問卷</a>
</div>
<div id="h-bottom" class="h-bottom">
<div class="h-inner">
<img src="./img/warning.png">
<p>依據(jù)《網(wǎng)絡(luò)安全法》运敢，為保障您的賬戶安全和正常使用校仑，請盡快完成手機(jī)號驗(yàn)證！ 新版<a >《京東隱私政策》</a>已上線传惠，將更有利于保護(hù)您的個(gè)人隱私迄沫。</p>
</div>
</div>
</div>
<div id="content">
<div id="loginBox">
<form action="case.html">
<img id="./img/qrImg" src="./img/qr.png">
<h2>密碼登錄</h2>
<div class="inputDiv"><img class="inputImg" src="./img/act.png"><input class="inputBox" type="text" placeholder="請輸入用戶名/手機(jī)號/郵箱"> </div>
<div class="inputDiv"><img class="inputImg" src="./img/pwd.png"><input type="password" class="inputBox" placeholder="請輸入密碼"></div>
<div><input id="loginBtn" type="button" value="登 錄"></div>
<div id="wbLogin"><img class="lgImg" src="./img/wb.png"><span>微博登陸</span></div>
<div id="zhiLogin"><img class="lgImg" src="./img/zhi.png"><span>支付寶登陸</span></div>
<div id="otherSelect">
<a href="case.html">忘記密碼</a>
<a href="case.html">忘記會員名</a>
<a href="case.html">免費(fèi)注冊</a>
</div>
</form>
</div>
</div>
<div id="footer">
<a href="">關(guān)于我們</a>|
<a href="">聯(lián)系我們</a>|
<a href="">人才招聘</a>|
<a href="">商家入駐</a>|
<a href="">廣告服務(wù)</a>|
<a href="">手機(jī)京東</a>|
<a href="">友情鏈接</a>|
<a href="">銷售聯(lián)盟</a>|
<a href="">京東社區(qū)</a>|
<a href="">京東公益</a>|
<a href="">English Site</a>
<p>Copyright ? 2004-2018 京東JD.com 版權(quán)所有 </p>
</div>
</body>
</html>
jd.css:
/* =================0.commen================== */
* {
margin: 0;
padding: 0;
position: relative;
}
a {
text-decoration: none;
}
/* =================1.header================== */
#header {
width: 100%;
height: 103px;
background-color: rgb(255,248,240)
}
#header .h-top {
width: 100%;
height: 80px;
background-color: rgb(255,248,240)
}
#header .h-top .icon {
height: 60px;
position: absolute;
/* 垂直居中*/
left: 142px;
top: 50%;
line-height: 50px;
margin-top: -30px;
}
#header .h-top a {
/*布局*/
position: absolute;
right: 40px;
bottom: 10px;
/*字體*/
font-size: 12px;
color: rgba(154,154,154,1.00);
/*背景圖*/
background: url(../img/q-icon.png) no-repeat;
padding-left: 20px;
}
#header .h-top a:hover{
color: red;
text-decoration: underline;
}
#header .h-bottom {
width: 100%;
height: 23px;
background-color: rgb(255,248,240);
}
#header .h-bottom div{
margin: 0 auto;
width: 1060px;
}
#header .h-bottom div img{
float: left;
}
#header .h-bottom p {
font-size: 13px;
padding-top: 3px;
color: rgb(121, 121, 121);
}
#header .h-bottom p a{
color: rgb(121, 121, 121);
}
#header .h-bottom p a:hover{
color: red;
text-decoration: underline;
}
/* =================2.content================== */
#content {
width: 100%;
height: 598px;
background:url(../img/bg.png) center no-repeat;
}
#content #loginBox {
position: relative;
top: 80px;
margin-left: 65%;
height: 400px;
width: 360px;
background-color: rgba(255, 255, 255, 0.83);
}
#content #qrImg {
float: right;
}
#content h2 {
float: left;
margin-top: 30px;
margin-left: 40px;
margin-right: 18px;
}
#content .inputDiv {
float: left;
background-color: rgb(221, 221, 221);
margin-top: 25px;
margin-left: 12%;
margin-right: 10%;
width: 270px;
height: 54px;
}
#content .inputBox {
float: right;
border: none;
margin: 2px 2px 2px 0px;
width: 220px;
height: 48px;
font-size: 16px;
}
#content .inputImg {
margin: 14px 10px 0px 15px;
}
#content #loginBtn {
border: none;
border-radius: 8px;
background-color: rgb(250, 82, 21);
font-size: 18px;
color: whitesmoke;
margin-top: 25px;
margin-left: 12%;
width: 270px;
height: 48px;
cursor: pointer;
}
#content #loginBtn:hover{
background-color: rgb(238, 55, 10)
}
#content #wbLogin {
float: left;
margin: 20px 10px 0px 11%;
}
#content #zhiLogin{
margin: 20px 10px 0px 0px;
}
#content .lgImg{
margin-bottom:-3px;
}
#content span{
margin-left:3px;
font-size: 13px;
color: grey;
}
#content #otherSelect a{
text-decoration: none;
font-size: 13px;
color: grey;
float: right;
margin: 15px 10px 20px 0px;
}
#content #otherSelect{
margin-right: 35px;
}
/* =================3.footer================== */
#footer {
font-size: 15px;
width: 100%;
padding-top: 10px;
height: 86px;
text-align: center;
}
#footer a{
margin:0px 8px 0px 5px;
text-decoration: none;
color: rgb(87, 87, 87);
}
#footer a:hover{
color: red;
text-decoration: underline;
}
#footer p{
padding-top: 18px;
color: rgb(87, 87, 87);
}
最終效果
image.png
