python学习笔记(CSS)

为什么用CSS

• CSS 指层叠样式表 (Cascading Style Sheets);
• 样式定义如何显示 HTML 元素;
• 样式通常存储在样式表中;
• 外部样式表可以极大提高工作效率;
提高效率
• 外部样式表通常存储在 CSS 文件中;

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

CSS语法规则

• 值的不同写法和单位;(eg:设置颜色)
• 如果值为若干单词,则要给值加引号;
• 多重声明,需要用分号将每个声明分开

CSS样式优先级

• 浏览器缺省设置
• 外部样式表
• 内部样式表(位于标签内部)
• 内联样式(在 HTML 元素内部)

选择器范例

• h1 { … } 标签选择器
• h1 i { … } 标签选择器
• #my { … } id选择器(唯一)
• #my p { … } id选择器
• .my { … } 类选择器(可不唯一)
• p .my { … } 类选择器
• .my p { … } 类选择器
• [title] { … } 属性选择器
• [title=westos] { … } 属性选择器
• [title~=hello] { … } • input[type=“text”] { … }

css背景

• 背景色:
background
• 背景图像: background-image
• 背景重复: background-repeat
• 背景定位: background-position
• 背景关联: background-attachment

main.css

h1{color: red;font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head><!--** 设置样式表的三种分类:1). 行内氧样式表;2). 内部样式表;3). 外部样式表;--><meta charset="UTF-8"><title>Title</title><!--内部样式表--><!--<style>--><!--h1{--><!--color: red;--><!--font-size: 24px;--><!--}--><!--</style>--><!--<!-外部样式表&ndash;&gt;--><link  rel="stylesheet"  href="css/main.css">
</head>
<body><!--内联样式表-->
<!--<h1 style="color: red; font-size: 24px">CSS样式</h1>-->
<h1 style="color: green">CSS样式表</h1></body>
</html>

案例——水平导航栏加css样式

nav.css

ul {list-style-type: none;text-align: center
}
ul li {display: inline-block;width: 20%;height: 30px;background: green;padding-top: 15px;font-size: 18px;/*text-decoration: none;*/
}ul li a {text-decoration: none;color: white;
}
/*鼠标经过时产生的变化*/
li:hover {background: #4CAF50;font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body><!--
行内元素: 占多少用多少
块级元素: 一个标签占一整行
-->
<ul><li><a href="http://www.baidu.com">博客</a></li><li><a href="#">学院</a></li><li><a href="#">技术</a></li><li><a href="#">编程</a></li>
</ul></body>
</html>

登录界面

main01.css

body {margin: 0; /*去掉默认的外边距*/padding: 0; /*去掉默认的内边距*/
}.content {background-color: pink;margin-top: 200px;height: 400px;}.main {/*border: 1px solid red;*/width: 600px;height: 400px;margin: 0 auto; /*块级标签居中的方式*/padding-top: 30px;text-align: center;}.main h1 {font-size: 60px;color: white;
}input[type='text'], input[type='password'] {width: 400px;height: 46px;border-radius: 25px;border: 0;margin-top: 15px;text-align: center;}
input[type='submit'] {background: #f31239;border-radius: 25px;margin-top: 15px;width: 200px;height: 46px;border: 0;color: white;}input:hover {background: deeppink;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/main01.css"></head>
<body><div class="content"><div class="main"><h1>Welcome</h1><form action="#"><input type="text" placeholder="请输入帐号"><br/><input type="password" placeholder="请输入密码"><br/><input type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆"></form></div>
</div></body>
</html>

模拟唯品会注册界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {padding: 0;margin: 0;}/*div {*//*border: 1px solid red;*//*}*/.header {width: 1920px;height: 100px;margin: 0 auto;}.logo{background: url("img/logo.png");width: 174px;height: 79px;float: left;margin-left: 200px;margin-top: 10px;}.service{margin-top: 20px;background: url("img/service.png");width: 321px;height: 55px;float: right;margin-right: 200px;}.content {width: 1920px;height: 600px;background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/margin: 0 auto;}.main {width: 360px;height: 450px;float: right; /*将div标签向右对齐*/margin-right: 150px;margin-top: 50px;padding: 20px 20px 30px 20px; /*内边距: 上右下左*/background: white;text-align: center;}#registerText {font-size: 20px;font-weight: bold;}#loginText {float: right; /*div向右偏移*/display: inline; /*块级元素变为行内元素*/}.main input {margin-top: 20px;height: 40px;width: 300px;border: 1px solid darkgray;border-radius: 10px;text-align: left;padding-left: 20px;}.main .code {width: 140px;}.main input[type='checkbox'] {width: 2px;height: 2px;}.main input[type='submit'] {background: #f10180;color: white;border: 1px solid #f10180;text-align: center;}.main a {text-decoration: none;color: #1d94d1;font-size: 13px;}.main #loginText a{color: #f10180;font-size: 15px;}.footer {width: 1920px;height: 100px;text-align: center;padding-top: 50px;margin: 0 auto;}</style></head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header"><div class="logo"></div><div class="service"></div></div>
<!--页面主体-->
<div class="content"><!--注册表单界面--><div class="main"><span id="registerText">会员注册</span><div id="loginText">已注册可<a href="#">直接登录</a></div><hr/><input type="text" placeholder="请输入电话号码"><br/><input type="text" class="code" placeholder="请输入验证码"> &nbsp;&nbsp;<input type="button" class="code" value="获取验证码"><br/><input type="password" placeholder="请输入密码"><br/><input type="password" placeholder="请重新输入密码"><br/><input type="checkbox">我已阅读并接受以下条款：<a href="#">《唯品会服务条款》 </a><a href="#">《隐私条款》 </a><a href="#">《唯品支付用户服务协议》 </a><a href="#">《唯品信用服务协议》 </a><br/><input type="submit" value="立即注册"><br/></div></div><!--脚标-底部设置(商标/备案信息)-->
<div class="footer">Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329</div></body>
</html>

模拟唯品会登录界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {padding: 0;margin: 0;}/*div {*//*border: 1px solid red;*//*}*/.header {width: 100%;height: 100px;}.logo {background: url("img/logo.png");width: 174px;height: 79px;float: left;margin-left: 200px;margin-top: 10px;}.service {margin-top: 20px;background: url("img/service.png");width: 321px;height: 55px;float: right;margin-right: 200px;}.content {width: 100%;height: 600px;background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/}.main {width: 360px;height: 300px;float: right; /*将div标签向右对齐*/margin-right: 150px;margin-top: 100px;padding: 20px 20px 30px 20px; /*内边距: 上右下左*/background: white;text-align: center;}#registerText {font-size: 20px;font-weight: bold;}#loginText {float: right; /*div向右偏移*/display: inline; /*块级元素变为行内元素*/}.main input {margin-top: 20px;height: 40px;width: 300px;border: 1px solid darkgray;border-radius: 10px;text-align: left;padding-left: 20px;}.main .code {width: 140px;}.main input[type='checkbox'] {width: 2px;height: 2px;}.main input[type='submit'] {background: #f10180;color: white;border: 1px solid #f10180;margin-top: 30px;text-align: center;}.main a {text-decoration: none;color: #1d94d1;font-size: 13px;}.main #loginText a {color: #f10180;font-size: 15px;}.footer {width: 100%;height: 100px;text-align: center;padding-top: 50px;}</style></head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header"><div class="logo"></div><div class="service"></div></div>
<!--页面主体-->
<div class="content"><!--注册表单界面--><div class="main"><span id="registerText">会员登录</span><div id="loginText"><a href="#">直接注册</a></div><hr/><input type="text" placeholder="请输入电话号码"><br/><input type="password" placeholder="请输入密码"><br/><input type="submit" value="立即登录"><br/></div></div><!--脚标-底部设置(商标/备案信息)-->
<div class="footer">Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329</div></body>
</html>

分页的设计

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {margin: 0 auto;width: 50%;height: 100px;/*border: 1px solid red;*/text-align: center;margin-top: 300px;}ul.pagination li {list-style-type: none;display: inline;}ul.pagination li a {text-decoration: none;color: black;padding: 8px 10px; /*10px左右内边距， 8px上下内边距*/border: 1px solid darkgray;border-radius: 20px;}ul.pagination li a.active {background: green;color: white;}/*如果类名不为active并且鼠标经过才显示的样式*/ul.pagination li a:hover:not(.active) {background: darkseagreen;border: 1px solid green;font-size: 19px;}</style></head>
<body><div><ul class="pagination"><li><a href="#">上一页</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li>....</li><li><a href="#">20</a></li><li><a href="#">21</a></li><li><a href="#">下一页</a></li></ul></div></body>
</html>