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--week3 逻辑回归函数(分类)、决策边界、逻辑回归代价函数、多分类与(逻辑回归和线性回归的)正则化
Classification It's not a good idea to use linear regression for classification problem. We can use ...
- jquery之div模拟textarea文本域轻松实现高度自适应
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jupyter Notebook插入图片的4种方法
来自:https://blog.csdn.net/qq_33039859/article/details/78507316 方法1:  Markdown ...
- iconfont作用在css伪类中的写法
iconfont作用在css伪类中需要注意两点: 1.字体声明(font-family: "iconfont";). 2.把字体写成十六进制的Unicode编码.比如:" ...
- shell脚本中if
[[ $i =~ ^[0-9]+$ ]] && echo 1 的解释 =~ 表示的是匹配 && 是前一个命令为真 才执行后一个命令 [[ ]] 是if判断使用正则表达式 ...
- ubuntu18.04.2LTS下安装和配置MySql数据库 --ubuntu
1.安装MySql ubuntu@thanlon-Ubuntu:~$ sudo apt install mysql-server 2.mysql安装完成后,默认用户名不是root,为了方便,一般我们需 ...
- PXE网络启动无人值守自动安装 centos 全程实录
PXE网络启动无人值守自动安装 centos 全程实录 http://shayi1983.blog.51cto.com/4681835/1549854/ 搭建Pxe服务器无人听应答全自动安装CentO ...
- C# 创建对象的方法
1.实例化方法,也就是new(): //where T:new () 表示T必须有构造函数 public static T Create<T> where T:new () { retur ...
- js的Timer方法
如显示时间: <script> //获取时间 function mytime(){ var a = new Date(); var b = a.toLocaleTimeString(); ...
- C++将十进制数转化为二进制
#include<iostream> using namespace std; void main() { ; ]; cin>>n; i=n; while(i) { a[j]= ...