Python入門22之CSS
阿新 • • 發佈：2018-12-12
CSS
標籤選擇器
<head> <meta charset="UTF-8"> <title>Title</title> <!--CSS的標籤選擇器--> <style> div{ width:100px; height: 100px; border-radius:25px; border: 1px solid blueviolet; text-align: center; margin: 0 auto; padding-top: 20px; text-shadow: 5px 5px 5px gray; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div>
類選擇器
<head> <meta charset="UTF-8"> <title>Title</title> <!--CSS的標籤選擇器--> <style> div{ width:100px; height: 100px; border-radius:25px; border: 1px solid blueviolet; text-align: center; margin: 0 auto; padding-top: 20px; text-shadow: 5px 5px 5px gray; } /*選擇div標籤中類名為important的進行設定下面的樣式*/ .important { width: 20px; height: 20px; font-size: large; } </style> </head> <body> <div class="important">1</div> <div>2</div> <div class="important">3</div> <div>4</div> <div class="important">5</div> </body>
id選擇器
<head> <meta charset="UTF-8"> <title>Title</title> <!--CSS的標籤選擇器--> <style> #cooffee{ width:100px; height: 100px; border-radius:25px; border: 1px solid blueviolet; text-align: center; margin: 0 auto; padding-top: 20px; text-shadow: 5px 5px 5px gray; } </style> </head> <body> <div>1</div> <div id="cooffee">2</div> <div>3</div> </body>
層級選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li a {
color: red;
}
input[type='submit']{
background: palevioletred;
width: 200px;
}
</style>
</head>
<body>
<ol>
<li><a href="#" > 新聞1</a></li>
<li><a href="#"> 新聞2</a></li>
<li><a href="#"> 新聞3</a></li>
</ol>
<ul>
<li><a href="#"> 新聞1</a></li>
<li><a href="#"> 新聞2</a></li>
<li><a href="#"> 新聞3</a></li>
</ul>
<form>
姓名: <input type="text"><br/>
密碼: <input type="password"><br/>
<input type="submit" value="註冊">
</form>
</body>
css的引入方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<ul>
<li style="background: blue">
<a href="http://www.w3school.com.cn/h.asp" style="
text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>
唯品會註冊介面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯品會網站註冊</title>
<style>
.complete{
width:1353px;
height: 883px;
}
.parth1{
width:1353px ;
height: 100px;
/*border: 1px solid crimson;*/
padding: 0;
margin: 0;
}
.parth1-img1{
padding-left: 14%;
padding-top: 4px;
}
.parth1-img2{
padding-left: 35%;
}
.parth2{
width: 1353px;
height: 643px;
border: 1px solid white;
background-image: url('8.png');
}
#login{
width: 360px;
height: 555px;
background-color: #FFF;
margin-left: 62%;
margin-top: 38px;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(241, 1, 145, 0.19);
}
.parth2-1{
width: 360px;
height: 51px;
}
.parth2-1-1{
width: 122px;
height: 31px;
text-align: center;
float: right;
font-size: 14px;
padding-top: 20px;
padding-right: 40px;
}
.tile{
padding-top: 18px;
padding-left: 35px;
color: grey;
}
#form-class{
width: 328px;
height: 412px;
border: 1px solid white;
margin-top: 30px;
margin-left: 14px;
}
.input-stye{
width: 100%;
height: 35px;
margin-top: 28px;
}
.change{
font-size: small;
text-decoration: none;
color:#176F9C;
}
a.change:hover{
text-decoration: none;
color: #1D94D1;
}
.last1{
text-decoration: none;
background-color: #f10180;
width: 328px;
height: 42px;
}
a.last1:hover{
text-decoration: none;
background-color: #333333;
width: 328px;
height: 42px;
}
</style>
</head>
<body class="complete">
<div class="parth1" >
<a href="https://www.vip.com/?ff=125|2|1|14"><img class="parth1-img1" src="唯品會u.png" ></a>
<img class="parth1-img2" src="Screenshot%20from%202018-09-29%2010-45-46.png">
</div>
<div class="parth2">
<div id="login">
<div class="parth2-1">
<div class="parth2-1-1">已註冊可<a href="https://passport.vip.com/login?ff=125|2|1|1" style="color: #f10180;text-decoration: none" >直接登入</a></div>
<h3 class="tile">會員註冊</h3>
</div>
<hr style="color: rgba(128, 128, 128, 0.28);margin: 0">
<form id="form-class">
<input class="input-stye" type="text" placeholder="請輸入電話號碼" style="margin-top: 0">
<input class="input-stye" type="text" placeholder="驗證碼" style="width: 50%">
<input type="button" value="獲取驗證碼" style='background-color: rgba(128, 128, 128, 0.11);
width:40%;height: 47px;border-radius: 10px;color: rgba(90, 81, 81, 0.36);margin-top: 28px;margin-left: 10px;'>
<input class="input-stye" type="password" placeholder="密碼由6-20位字母，數子和符號組成">
<input class="input-stye" type="text" placeholder="再次輸入上面的密碼">
<div class="input-stye">
<input type="checkbox" name="read">我已閱讀並接受以下條款:
<a class="change" href="#" >《唯品會服務條款》</a>
<a class="change" href="#" >《隱私條款》</a>
<a class="change" href="#" >《唯品會支付使用者協議》</a>
<a class="change" href="#" >《唯品會信用服務協議》</a>
</div>
<div class="input-stye" style="margin-top: 48px;height: 42px" >
<a class="last1" href="#"><input type="button" value="立即註冊" style="width: 100%;height: 100%;background-color: #f10180;color: white;border-radius: 10px;"></a>
</div>
</form>
</div>
</div>
</body>
</html>
