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() ...
随机推荐
- MQTT 入门介绍
一.简述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级& ...
- Linux 的三种软件安装包介绍
通过RPM软件包来安装 说起RPM(RedHat Package Management)标准的软件包,大家可能都会想起大名鼎鼎的REDHAT公司,正是RPM软件包发行方式的出现,使Linux中的应用软 ...
- Vim：Vim入门级配置
转:https://vimjc.com/vimrc-config.html Vim配置文件.vimrc Vim编辑器相关的所有功能开关都可以通过.vimrc文件进行设置. .vimrc配置文件分系统配 ...
- scala基础API
1.对象和json转换 1.1 json取值 val json:JSONObject = JSON.parseObject(jsonMsg:String)val message:String = js ...
- Python基础模块整理
1.shutil :可以用来对文件进行基本操作(拷贝,剪切等) 2.glob :提供了一个函数用于从目录通配符搜索中生成文件列表 3.datetime :日期和时间的处理 4.zlib ...
- 3_08_MSSQL课程_Ado.Net_子查询
子查询 1.把一个查询结果作为一个表来使用,就是子查询. 2.把一个查询结果作为一个 表达式进行使用就是子查询. (分页Sql)
- 【PAT甲级】1068 Find More Coins (30 分)（背包/DP）
题意: 输入两个正整数N和M(N<=10000,M<=10000),接着输入N个正整数.输出最小的序列满足序列和为M. AAAAAccepted code: #define HAVE_ST ...
- MySQL 远程连接问题 (Linux Server)
Mysql Workbench 连接Ubuntu上的Mysql时报如下错误: 原因:查看 /etc/mysql/mysql.conf.d/mysqld.cnf # # Instead of skip ...
- JavaScript的发展史
一.JavaScript发展历程 1. 诞生 JavaScript因互联网而生,紧跟浏览器的发展而发展. 1990年,欧洲核能研究所(CERN)科学家在互联网(Internet)基础上,发明了 ...
- 小白学 Python 爬虫：Selenium 获取某大型电商网站商品信息
目标 先介绍下我们本篇文章的目标,如图: 本篇文章计划获取商品的一些基本信息,如名称.商店.价格.是否自营.图片路径等等. 准备 首先要确认自己本地已经安装好了 Selenium 包括 Chrome ...