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() ...
随机推荐
- Centos610快照克隆后网络配置
VMware中安装的Centos610快照并克隆后网络配置 1.网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR ...
- 跨域-JSONP
jsonp跨域 - 前端适配,后台配合 说明:前后台同时改造 cnpm i jsonp --save-dev 在App.vue里 import jsonp from 'jsonp' let url = ...
- ubuntu 命令记录
1.su root 进入root模式 2.ifconfig 查看ip地址 3.ls 查看文件 4./etc/init.d/matrix-gui-2.0 stop 关闭matrix界面 5.cd /文 ...
- java 8 list的stream操作 list中的对象中的某一个成员取出转为该成员的list,以及对象过滤,筛选某个属性后的成员
取成员属性list List<String> configList = codeEntityList.stream().map(t -> t.getName()).distinct( ...
- formValidation单个输入框值改变时校验
$("#tv_form").data("formValidation").updateStatus("pay.vcAmount", &qu ...
- Numpy中rot90函数实现矩阵旋转
从NumPy的官方完整查到rot90函数语法格式如下: rot90(m, k=1, axes=(0, 1) m是要旋转的数组(矩阵),k是旋转的次数,默认旋转1次,那是顺时针还是逆时针呢?正数表示逆时 ...
- Android Studio如何更新support repository
转自: http://blog.csdn.net/sinat_29696083/article/details/70256377 刚进新公司,熟悉新业务中.老大叫我看看关于ConstraintLayo ...
- HDU 1372 Knight Moves(bfs)
嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1372 这是一道很典型的bfs,跟马走日字一个道理,然后用dir数组确定骑士可以走的几个方向, ...
- 安装 Python 虚拟环境 (Linux)
我的 Ubuntu 18.04 预安装了 python 3.6,但是没有安装 pip,所以先进行安装: apt-get install python-pip 1. 安装虚拟环境所需包: pip ins ...
- .NET Runtime at IP 791F7E06 (79140000) with exit code 80131506.
事件類型: 錯誤 事件來源: .NET Runtime 事件類別目錄: 無 事件識別碼: 1023 日期: 2015/12/15 時間: 上午 10:18:52 使用者: N/A 電腦: KM-ERP ...