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() ...
随机推荐
- pikachu-xx型注入
一 xx型注入,一脸懵x,管他什么型注入,先在输入框里随便输入个字符a试试 我们可以发现该传输方式为get型传输,传输的参数为name=a&submit=查询 二 测试使其闭合的符号 加一个单 ...
- POJ1087 A Plug of UNIX
你作为某高管去住宿了,然后宾馆里有几种插座,分别有其对应型号,你携带了几种用电器(手机,电脑一类的),也有其对应型号:可是不一定用电器就能和插座匹配上,于是宾馆的商店里提供了一些转换器,这些转换器可以 ...
- k8s 的pod进阶
容器探测的具体实现方法:三种探针类型 ExecAction.TCPSocketAction.HTTPGetAction lifecycle <Object> Actions that th ...
- 吴裕雄--天生自然Numpy库学习笔记：NumPy 数学函数
NumPy 包含大量的各种数学运算的函数,包括三角函数,算术运算的函数,复数处理函数等. NumPy 提供了标准的三角函数:sin().cos().tan(). import numpy as np ...
- C++ STL之集合set的使⽤
写在最前面,本文摘录于柳生笔记: set是集合,一个set里面个元素各不相同的,而且set会按照元素从小到大的进行排序,一下是set的常用方法:
- bootstrap-suggest-plugin input可选可输(表单) 好用的前端插件
bootstrap-suggest-plugin DEMO下载 1.准备:页面引入(点击下载) <link rel="stylesheet" href=&q ...
- pycharm 右键无法显示unittest框架&&解决右键只有unittest 运行如何取消右键显示进行普通run
上面是普通文件和unittest 导入的文件右键快捷键显示情况,可以看出两者快捷键都是ctr+shift+F10,如果你是右键模式想运行unitest,但是又不知道哪里配置unittest直接运行快捷 ...
- Java入门笔记 02-数组
介绍: Java的数组既可以存储基本类型的数据,也可以存储引用类型的数据,但是要求所有的数组元素具有相同的数据类型.另外,Java数组也是一种数据类型,其本身就是一种引用类型. 一.数组的定义: 数据 ...
- 2.1.1Remove Duplicates from Sorted Arr
/* 题目:2.1.1 Remove Duplicates from Sorted Array Given a sorted array, remove the duplicates in place ...
- Win10中小娜无法搜索本地应用
解决方案 1.win+X - Windows PowerShell(管理员) 2. 输入Get-AppXPackage -Name Microsoft.Windows.Cortana | Fo ...