wob宝典

cellspacing="0"     空标签:span           横线:<del>5999元</del>

/*鼠标放上去之后变成小手*/

cursor: pointer;

删除li标签的点list-style: none;

图片居中margin: 0px auto;

块元素

选择器

子代选择器  使用>号隔开,只选择后代1代     Div> a{Color:black}  Div后所有a标签黑色

后代选择器使用空格隔开,后代所有子孙全部选中Ui a{Color:red} 并集选择器使用,号隔开,兄弟单位之间选中H1,div,a,{Color:rod}

子级: 孙级:>  兄弟级:,

同级别标签选择。

元素转换

转换为块元素:·display:block;

转换为行内元素:display:inline;

转换为行内块元素·:display: inline-block;

颜色变换

a:link{

color: red;

}点前红色

a:visited{

color: green;

}点后绿色

a:hover{

color: blue;

}放上蓝色

a:active{

color: yellow;

}点击时候黄色
背景半透明(盒子透明

背景颜色透明:

background-color: rgba(0, 0, 0, .3)

盒子透明

opacity

边框

border

border-width  定义边框粗细,单位是px

border-style  边框的样式 盒子样式

• none:没有边框即忽略所有边框的宽度

• solid:实线 

• dashed:虚线

• dotted:点线

border-top 边框线选择,(方向 样式  颜色)

     top上  bottom下  left左 right

border-color  边框颜色

表格的细线边框

border-collapse

• collapse 单词是合并的意思

• border-collapse: collapse; 表示相邻边框合并在一起

内边距

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

padding:

1个值 padding:上下左右内边距;

2个值 padding: 上下内边距 左右内边距

3个值 padding:上内边距 左右内边距 下内边距

4个值 padding: 上内边距 右内边距 下内边距 左内边距

border-radius  边框圆角

选择 px  , %。

盒子阴影阴影属性

box-shadow

offset-x 阴影的水平偏移量。正数向右偏移,负数向左偏移

offset-y 阴影的垂直偏移量。正数向下偏移,负数向上偏移

blur      阴影模糊距离

Spread    阴影大小

color    阴影的颜色

inset     表示添加内阴影,默认为外阴影  阴影透明度

box-shadow

文字格式

font-size 字号 通常使用单位 px 像素,设置字号时一定一定带单位

font-family 字体 按照团队约定或者UI设置的字体来写

font-weight 字体粗细 加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字100-900后不要跟单位

font-style 字体样式 倾斜是 italic 不倾斜是 normal  工作中我们最常用 normal 取消倾斜

font 字体连写 1. 字体连写是有顺序的 不能随意换位置   2. 其中字号和字体必须同时出现

text-align  

left 左对齐(默认值)

right 右对齐

center 居中对齐

盒子里面的文字对齐方式

text-decoration (装饰文本)字体线

text-decoration: none   取消下线

text-decoration: underline  下横线

 text-decoration: line-through 定义穿过文本下的一条线。

text-decoration: overline    定义文本上的一条线。

text-indent(文本缩进)段落首行缩进

text-indent:10px;

  2em;

div {text-indent: 10px; }

text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

div {text-indent: 2em; }

line-height (行间距 行高)字体居中

line-height: 42px;     行高设置

align="center"

行高文字高度       文字居

行高于文字高度    文字往 

行高于文字高度     文字往

字体横线

下横线text-decoration: underline;

上横线 text-decoration:overline ;

中间线text-decoration:line-through ;

取消下横线text-decoration: none;

取消字体倾斜text-decoration: none;

字体倾斜font-style: oblique;

输入框

:focus选择器

选择获得光标的元素和输入框相关

input:focus

表单控件: <input />

1、属性名:type 设置表单类型

属性值:1、text 文本框

2、password 密码框

3、date 日期

4、file 文件

5、radio 单选

6、checkbox 多选

7、submit 提交按钮

8、reset 重置按钮

9、button 普通按钮

2、属性名:name 设置名称

属性值:自定义

3、属性名:value 设置默认值

属性值:自定义

4、属性名:placehorder 设置提示信息

属性值:自定义

文本域:<textarea></texearea>

下拉框:<select><select>

下拉框中的每一条内容都需要一对<option></option>

<body background="img/王者人物.jpg">

<form>

用户名:<input type="text" placeholder="请您输入用户名" /><br />

密 码:<input type="password" /><br />

日 期:<input type="date" /><br />

文 件:<input type="file" /><br />

单 选:

<input type="radio" name="01" value="A" />A

<input type="radio" name="01" />B

<input type="radio" name="01" />C

<label><input type="radio" name="01" />D</label>

<br />

多 选:

<input type="checkbox" name="001" checked="checked" />A

<input type="checkbox" name="001" />B

<input type="checkbox" name="001" />C

<input type="checkbox" name="001" />D

<br />

提交按钮:<input type="submit" value="立即注册" /><br />

重置按钮:<input type="reset" value="重置信息"  /><br />

普通按钮:<input type="button" value="开始游戏" />

<button type="">开始游戏</button>

<br />

文本域:<textarea cols="30" rows="3"></textarea><br />

下拉框:

<select>

<option>开发视图</option>

<option selected="selected">边改边看模式</option>

<option>团队同步视图</option>

</select>

<br />

图片提交按钮:

<input type="image" src="img/btn.png" width="120" />

</form>

</body>

Lmg图片

添加背景图片:

background url(img/logo.png);

background-image: url(img/logo.png);

        Back-im        url     img     

 设置渐变色

background-image: linear-gradient(red,blue,green);

       Back-im            li-gr                 红色-蓝色-绿

插入图片

图片在框架内的位置

background-position: 40px 10px;

                    据左边线 上边线

·

所有透明度在0-1之间

背景透明度

background-color: rgba(0, 255, 255,0.6);

       Back-col    rgba  背景颜色    透明度

盒子全部透明

background-color: green; 背景颜色

opacity: 0.5;             透明度

}

于背景定位区域的百分比percentage

src属性   添加 图片路径 (照片路径)

alt属性 网页 图片加载失败  给用户的一些提示(照片备注)

title属性 用于img图片 鼠标放上 不动 给用户提示 相关信息(鼠标放上显示文字)

背景属性更改

background-color   背景颜色添加

background-image   背景图片

background-repeat  (背景平铺)

Repeat     背景图像在纵向和横向上平铺(默认的)

no-repeat   不平铺

repeat-x    上平铺

repeat-y    纵向平铺

background-position  背景照片位置

background-positionl:ength

百分数 | 由浮点数字和单位标识符组成的长度值

background-positionposition

top | center | bottom | left | center | right 方位名词

背景半透明(盒子透明

背景颜色透明:

background-color: rgba(0, 0, 0, .3)

盒子透明

opacity

背景图像固定

滚动

background-attachment:scroll

固定

background-attachment:fixed

背景图像的大小

background-size: length|percentage|cover|contain;

length

设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出

一个值,第二个是设置为 auto(自动)

percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。

如果只给出一个值,第二个是设置为"auto(自动)"

cover

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

背景简写

背景简写 : 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

文字阴影设置

offset-x   必须,水平阴影位置,允许负值

offset-y   必须,垂直阴影位置,允许负值

blur       可选。阴影模糊距离

color      可选。阴影的颜色

浮动

Float

none   元素不浮动(默认值)

left   元素向左浮动

right  元素向右浮动

超链接 <a></a>

1、属性名:href 设置链接的跳转地址

属性值:1、网址链接(https://www.baidu.com)

2、图片链接(图片的地址)

3、空连接:(#)

4、网页链接(html网页的路径)

5、下载文件

6、锚点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值