前端之css笔记2
1 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
div[egon*="2"]{
color:red;
} .iten1{
background-colr:gold;
} .item2{
color:blue;
} div[egon~=alvin]{
color:red;
}
</style>
</head>
<body> <div class="item1 item2">DIV</div> <div class="c1" id="d1">fang</div> <div>jie</div> <div egon="yuan alvin">egon123</div>
<div egon="alex">egon456</div>
<span egon="123">egon</span> </body>
</html>
2 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--a:link{-->
<!--color:green;-->
<!--}--> <!--a:hover{-->
<!--color:goldenrod;-->
<!--}--> <!--a:active{-->
<!--color:blue;-->
<!--}--> <!--a:visited{-->
<!--color:red;-->
<!--}--> <!--p{-->
<!--background-color:wheat;-->
<!--}--> <!--span:after{-->
<!--content:"";-->
<!--display:block;-->
<!--}--> <!--<!–.c1{–>-->
<!--<!–width:300px;–>-->
<!--<!–height:200px;–>-->
<!--<!–background-color:wheat;–>-->
<!--<!–}–>-->
<!--.c1:hover{-->
<!--background-color:gray;-->
<!--}--> .box1,.box2{
width:300px;
height:200px;
}
<!--.box1{-->
<!--background-color:wheat;-->
<!--}-->
<!--.box2{-->
<!--background-color:goldenrod;-->
<!--}--> <!--操作的标签一定是悬浮标签的子元素-->
<!--.outer{-->
<!--width:300px;-->
<!--border: 1px solid red;-->
<!--}--> <!--.outer:hover .box1{-->
<!--background-color:red;-->
<!--}--> </style>
</head>
<body> <div class="c1"></div>
<a href="#">hello world</a>
<span>hello</span>
<div></div>
<a href="">click</a> <div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
3 继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
body{
color:erd;
} p{
color:darkgreen;
} </style>
</head>
<body> <p>ppp</p>
<div class="c1">
DIV
<p>ppppp</p>
<span>SPAN</span>
<div>DIV</div>
</div> </body>
</html>
4选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> /*id:100 class:10 element:1*/
<style>
p{
color:red；
} #d1{
color:gold;
} .c1{
color:green;
} #d2{
color:blueviolet;
} c4{
color:red!important;
} #d2{
color:green;
}
</style>
</head>
<body> <p class="c1" id="d1">ppp</p> <div class="c2">
<div class="c3">
<p class="c4 c5" id="d2" style="...">p4</p>
</div>
<p class="p1"></p>
</div> <p>
<div>div</div>
</p> </body>
</html>
5 属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
h2{
<!--color:#8B5742;-->
color:RGBA(255,0,0,0.5);
width:200px;
heeight:200px;
} .c1{
color:#8B5742;
width:200px;
heeight:200px;
} span{
width:200px;
height:200px;
background-color:goldenrod;
}
</style>
</head>
<body> <div class="c1">DIV</div> <h2 class="c2">H2</h2> <span>SPAN</span> <a href="#">click</a> </body>
</html>
6 水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color:wheat;
text-align:justify;
}
</style>
</head>
<body> <p>fang jie</p>
</body>
</html>
7 文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
<!--a{-->
<!--text-decoration:none;-->
<!--font-weight:;-->
<!--font-style:italic;-->
<!--}--> <!--p{-->
<!--word-spacing:20px;-->
<!--letter-spacing:3px;-->
<!--}--> <!--div{-->
<!--background-color:wheat;-->
<!--width:100%;-->
<!--height:300px;-->
<!--line-height:300px;-->
<!--text-align:center;-->
<!--}--> .btn{
width:30px;
height:60px;
background-color:grey;
color:white;
text-align:center;
line-height:60px;
font-size:30px;
} img{
vertical-align:-6px;
}
</style>
</head>
<body> <!--<p>I am fang</p>--> <!--<a href="">click</a>--> <!--<div>H1H1H1</div>--> <div class="btn"> < </div> <div>title
<img src="http://dig.chouti.com//images/logo.png" alt="">
</div>
</body>
</html>
8 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
border:1px solid red;
width:100%;
height:600px;
background:url("http://dig.chouti.com//images/logo.png") no-repeat center center;
<!--background-image:url("http://dig.chouti.com//images/logo.png");-->
<!--background-repeat:no-repeat;-->
<!--background-position:center center;-->
}
</style>
</head>
<body> <div class="c1"></div>
</body>
</html>
9边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width:100px;
height:200px;
border-right:3px dashed red;
<!--border:3px dashed red;-->
<!--border-style:dashed;-->
<!--border-color:red;-->
<!--border-width:5px;-->
<!--border:3px dashed red;-->
<!--border-right:3px dashed red;-->
}
</style>
</head>
<body> <div class="c1"></div>
</body>
</html>
10 列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style:none;
}
</style>
</head>
<body> <ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul> </body>
</html>
11 内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> .c1{
width:200px;
height:200px;
background-color:wheat;
padding:50px;
border:10px solid red;
margin-bottom:20px;
} .c2{
margin-top:20px;
whdth:200px;
height:200px;
background:green;
padding:50px;
border:10px solid blue;
} .pager_3{
width:20px;
height:20px;
background-color:darkgray;
padding:;
border-redius:20%;
} </style>
</head>
<body> <div class="c1">DIV</div>
<div class="c2">DIV</div> <div class="pager_3">3</div> </body>
</html>
12 float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:;
} .c1{
width:100px;
height:200px;
background-color:wheat;
float:left;
} .c2{
width:200px;
height:100px;
background-color:green;
float:left;
} .c3{
width:150px;
height:150px;
background-color:goldenrod;
float:left;
} .outer{
width:200px;
height:200px;
background-color:green;
margin:20px auto;
}
</style>
</head>
<body> <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div> <span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span> <div class="outer"></div> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
前端之css笔记2的更多相关文章
- 前端之css笔记1
1 css引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 前端之css笔记3
一 display属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- net 编译报错:编辑器或项目正在尝试签出在内存中修改的文件，这将导致保存该文件
1,报错提示: 编辑器或项目正在尝试签出在内存中修改的文件,这将导致保存该文件. 在生成过程中保存文件是危险的,这可能会在将来导致不正确的生成输出. 是否仍然继续签出? 2,原因:licenses.l ...
- springboot - mybatis - 下划线与驼峰自动转换 mapUnderscoreToCamelCase
以前都是在mybatis.xml中来配置,但是spring boot不想再用xml配置文件.网上搜寻了好久,才找到设置办法:sessionFactoryBean.getObject().getConf ...
- java Export Excel POI 转
最终选择用POI成功导出excel.总之很有用. http://www.cnblogs.com/xwdreamer/archive/2011/07/20/2296975.html http://poi ...
- eclipse添加源码的另外一种方法
当我们使用maven或者gradle时,我们不需要担心源码的问题.Maven会帮我们下载jar包的同时下载对应的源码包.一般为source.jar,比如servlet-api-2.5-sources. ...
- Haskell语言学习笔记（42）Bifunctor
Bifunctor class Bifunctor p where bimap :: (a -> b) -> (c -> d) -> p a c -> p b d bim ...
- 将JDBC的resultSet映射到JavaBaen
// 执行赋值后SQL, rs=pstm.executeQuery(); //判断是否有返回结果,有下一行rs.next()方法为true ...
- tbytes 转 十六进制 string
function Bytes2HexStr(buf: TBytes; len: Integer): AnsiString; begin SetLength(Result, len*2); BinT ...
- Python 列表表达式 ，迭代器(2) Yield
.yield 暂存为list def max_generator(numbers): current_max = for i in numbers: current_max = max(i, curr ...
- easyui input未设id导致的问题
今天又踩了一个坑,大致是没有给input设id,使用类选择器绑定easyui控件,然后使用name设值,现在值设进去后界面没有显示. 做的界面部分截图如图: 点击下面两个橙色的按钮,通过调用下面的方法 ...
- mysql连接数据库存报下面错误：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
输入 mysql -u root 登录 mysql 的时候出现以下错误: ERROR 2002 (HY000): Can't connect to local MySQL server through ...