CSS样式补充第二天
#p1{
/* border-width: 1px;*/
/*边框实线*/
/*border-style: solid;*/
/*边框虚线*/
/*border-style: dashed;*/
/*边框点线*/
/*border-style:dotted;*/
/*边框双线*/
/*border-style:double;*/
/*边框颜色*/
/*border-color: red;*/
/*简单写法*/
/* border: 1px dotted orange;*/
border-bottom: 1px dotted #A2A0A0;
border-left: 2px double red;
/*背景颜色*/
/* background-color: blue;*/
background-image: url(img/a.jpg);
/*背景图位置 */
background-position: -30px -500px;
}
元素标签引用案例
li{
border-bottom: 1px dotted yellow;
}
body{
background-image: url(img/2.png);
background-repeat: repeat-y;
background-attachment: fixed;
}
<ul type="dis">
<li>选项一</li>
<li>选项二</li>
</ul>
CSS图片位置的调整 案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#in1{
background-image:url(img/bg.png);
background-position: -247px -90px;
text-indent: 25px;
}
</style>
</head> <body>
<input type="text" id="in1">
</body>
</html>
给文字添加触碰效果,点击后效果,移动到效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<style>
/*未访问的样式*/
#a1:link{
text-decoration: none;
color: red;
}
/*访问后的样式*/
#a1:visited{
color: yellow;
}
/*鼠标悬浮时的样式*/
#a1:hover{
color:#666666;
}
/*点击时的样式*/
#a1:active{
color:blue;
}
/*hover可以用在任意标签*/
#p1:hover{
color: pink;
}
</style>
</head> <body>
<a href="#" id="a1">百度</a>
<p id="p1">这是p标签</p>
<a href="#" style="text-decoration: none;">去下划线超链接样式</a>
</body>
</html>
有序列表无需列表用CSS样式快速编辑
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul li{
/*list-style-type: circle;*/
list-style-image: url(img/sp.png);
}
ol li{
list-style-type: lower-alpha;
}
</style>
</head> <body>
<!--无序列表-->
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<!--有序列表-->
<ol>
<li>美术</li>
<li>体育</li>
<li>艺术</li>
</ol>
</body>
</html>
CSS样式补充第二天的更多相关文章
- CSS样式补充代码
CSS符号属性: list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roma ...
- CSS样式表-------第二章:选择器
二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <met ...
- html学习第二天—— 第七章——CSS样式基本知识
外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...
- HTML第二部分 CSS样式表
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- 11-19网页基础--第二部分CSS样式表基本概念
CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...
- 网站开发综合技术 第二部分 CSS样式表
第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- CSS样式----CSS的继承性和层叠性(图文详解)
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
随机推荐
- Machine Learning--week2 多元线性回归、梯度下降改进、特征缩放、均值归一化、多项式回归、正规方程与设计矩阵
对于multiple features 的问题(设有n个feature),hypothesis 应该改写成 \[ \mathit{h} _{\theta}(x) = \theta_{0} + \the ...
- XGpio函数
头文件 #include"xgpio.h" int XGpio_Initialize(XGpio * InstancePtr, u16 DeviceId) 功能:初始化GPIO 参 ...
- QT中设置窗口背景颜色
QWidget是所有用户界面对象的基类,这意味着可以用同样的方法为其它子类控件改变背景颜色. Qt中窗口背景的设置,下面介绍三种方法. 1.使用QPalette 2.使用Style Sheet 3.绘 ...
- HBase和MongoDB的区别
Mongodb用于存储非结构化数据,尤其擅长存储json格式的数据.存储的量大概在10亿级别,再往上性能就下降了,除非另外分库.Hbase是架构在hdfs上的列式存储,擅长rowkey的快速查询,但模 ...
- 版本控制 version control
而版本控制能记录所有的操作,如创建删除增加,并能返回到之前的版本.版本控制通常需要同一些远程仓库配合使用,如GitHub 廖雪峰教学有 https://www.liaoxuefeng.com/wiki ...
- [Hibernate] One-To-Many 配置文件和注解的方式以及HQL语句
一对多需要在一的类配置多的类的set泛型集合. 多的一端需要添加一的类作为属性,其和数据库对应的是对应表的主键. 一个购物车有多个商品,购物车有个cart_id作为主键,商品除了自己的items_id ...
- hbase大规模数据写入的优化历程 ,ZZ
http://blog.csdn.net/zbc1090549839/article/details/51582817
- CentOS6上ftp服务器搭建实战
1.安装程序包 [root@node1 ~]$ yum install -y vsftpd[root@node1 ~]$ yum install -y lftp # 安装测试软件 2.启动vsftpd ...
- 6月19 使用tp框架生成验证码及文件上传
ThinkPHP中自带能生成验证码的类:ThinkPHP/Library/Think/Verify.class.php 默认情况下,验证码的字体是随机使用 ThinkPHP/Library/Think ...
- js 获取getElementsTagName()方法返回值的内容
<div id="news-top" class="section"> <h3>Some title</h3> <di ...