CSS 常用操作
1、对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对齐</title>
<style>
* {
margin: 0px;
} .div {
width: 70%;
height: 1000px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="div"> </div>
</body>
</html>
2、分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分类</title>
<style>
.p1 {
line-height: normal;
max-width: 250px;
} .p2 {
width: 400px;
line-height: 200%;
} .p3 {
width: 400px;
line-height: 50%;
}
</style>
</head>
<body>
<p class="p1">
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
</p>
<p class="p2">
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
</p>
<p class="p3">
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
this is my web page this is my web page this is my web page
</p>
</body>
</html>
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分类</title>
<style>
li {
display: inline;
visibility: hidden;
}
</style>
</head>
<body>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
</html>
3、垂直导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>垂直导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
} a:link, a:visited {
text-decoration: none;
display: block;
background-color: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
} a:active, a:hover {
background-color: crimson;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>
4、水平导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>水平导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: burlywood;
width: 250px;
text-align: center;
} a:link, a:visited {
font-weight: bold;
text-decoration: none;
background-color: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
} a:active, a:hover {
background-color: crimson;
} li {
display: inline;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
</html>
5、图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS图片</title>
<style>
body {
margin: 10px auto;
width: 70%;
height: auto;
/*background-color: burlywood;*/
} .image {
border: 1px solid darkgray;
width: auto;
height: auto;
float: left;
text-align: center;
margin: 5px;
} img {
margin: 5px;
width: 300px;
height: 180px;
opacity: 0.8; /*透明度*/
} .text {
font-size: 15px;
margin-bottom: 5px;
} a:hover {
background-color: burlywood;
}
</style>
</head>
<body>
<div class="image">
<a href="#" target="_self">
<img src="Scripts/img/bg.jpg" alt="美女" />
</a>
<div class="text">漂亮的妹子</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="Scripts/img/bg.jpg" alt="美女" />
</a>
<div class="text">漂亮的妹子</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="Scripts/img/bg.jpg" alt="美女" />
</a>
<div class="text">漂亮的妹子</div>
</div> </body>
</html>
CSS 常用操作的更多相关文章
- web前端学习（三）css学习笔记部分（3）-- css常用操作
5. CSS常用操作 5.1 对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...
- CSS常用操作-图片
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- CSS常用操作-对齐
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- CSS常用操作-导航栏
1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- HTML5学习笔记（十）：CSS常用操作
对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...
- css常用操作
对齐操作 1.使用margin属性进行水平对齐 margin-left:auto; margin-right:auto; 2.使用position属性进行左右对齐 3.使用fl ...
- CSS常用操作-分类
- CSS常用选择器
关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...
- js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...
随机推荐
- php redis 集群扩展类文件
<?php /** * redis集群驱动 */ namespace Common\Api; class RedisCluster{ protected $servers=array( '192 ...
- 为 git 设定 socks5 代理
为 git 设定 socks5 代理 查看当前设定 git config --global -l 为 git 设定全局代理 git config --global http.proxy socks5h ...
- python-opencv：读取图片
代码 import cv2 # 读取一张图片 src = cv2.imread("../images/lena.jpg") # 命名一个窗口 cv2.namedWindow(&qu ...
- mysql数据库数据备份还原
1.直接在命令行里面执行 备份一个数据库:mysqldump -h server -u username -p password db_name > database-sqlbkp_`date ...
- 取消Oracle数据库密码期限 取消用户锁定
1.首先查用户被锁时间:sql>select username,account_status,lock_date from dba_users where username='SA'; 2.解锁 ...
- ipfs 资料汇集
目录 js ipfs u can use wikipeida here js ipfs https://github.com/ipfs/js-ipfs u can use wikipeida here ...
- from flyai.dataset import Dataset 报错
from flyai.dataset import Dataset 报错 No module name 'flyai' 先找到ide中使用的Python对应的pip的位置. windows用户 ...
- [Unity] Shader Graph Error 当前渲染管道与此主节点不兼容(The current render pipeline is not compatible with this master node)
Shader Graph Error : The current render pipeline is not compatible with this master node 问题产生环境: Un ...
- JS实现对对象的深拷贝
手动遍历对象拷贝 /** * 深拷贝 * @param {*} obj 拷贝对象(object or array) * @param {*} cache 缓存数组 */ function deepCo ...
- 从零构建以太坊（Ethereum）智能合约到项目实战——第23章 从零构建和部署去中心化投票App，decentralization Voting Dapp
P90 .1-从零构建和部署去中心化投票App-01 P91 .2-从零构建和部署去中心化投票App-02 P92 .3-从零构建和部署去中心化投票App-03 参考博文:http://liyuech ...