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() ...
随机推荐
- Windows 搭建WAMP+Mantis
下载WAMP http://www.wampserver.com/ 安装直接下一步就行 安装完启动后,显示下面的logo 在浏览器输入 127.0.0.1/phpmyadmin 设置数据库(默认 ...
- python splash scrapy
python splash scrapy 1. 前言 slpash是一个渲染引擎,它有自己的api,可以直接访问splash服务的http接口,但也有对应的包python-splash方便调 ...
- ES6-const定义常量
在es5中我们一般将变量名大写来表明这是一个常量,但其实它是可以修改的. 在es6中可以用const来定义常量,它定义的常量不能修改. const NAME = 'tom'; NAME ...
- BUG搬运工：CSCvp31778-3802 apsw_watchdog: WARNING: System memory is running low
如下bug主要针对Cisco COS AP比如18.28.38... 主要现象: AP上连关联的终端显示的是信号满格,但是无法访问内网,所有的终端都这样,只有重启AP后才可以解决. 频率: 这种现象有 ...
- vue下canvas绘制矩形
起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...
- Educational Codeforces Round 68 (Rated for Div. 2)D（SG函数打表，找规律）
#include<bits/stdc++.h>using namespace std;int sg[1007];int main(){ int t; cin>>t; while ...
- 弱密码检测JR！
1.JR(Joth the Ripper)简介·一款密码分析工具,支持字典式的暴力破解·通过对 shadow 文件的口令分析,可以检测密码·官方网站:http://www.openwall.com/j ...
- mysql 表这段内容替换
update `cr_article` set `img`=replace(`img`,'http://192.168.2.10/upload','http://zouke1220.oss-cn-be ...
- idea 设置自定义注释
详细:idea如何设置类头注释和方法注释 2016年10月13日 15:09:11 标签: idea / 注释 / 97989 编辑 删除 idea和eclipse的注释还是有一些差别的. idea: ...
- nginx 的四层代理
需要编译四层模块 [root@python vhast]# cd ~/nginx-1.15.9/ [root@python nginx-1.15.9]# ./configure --prefix=/d ...