牡丹江建设工程信息网站,网站开发助手,平台设计是什么,软广告经典案例一、超级链接伪类
a href”#”超级链接/a:link 未点击前 a:hover 鼠标悬停 a:active 鼠标正在点击#xff08;左键按着不放#xff09; a:visited 点击后
加载顺序一般我们是按照#xff1a;link - visited - hover - active 列表样式
list-…一、超级链接伪类
a href”#”超级链接/a:link 未点击前 a:hover 鼠标悬停 a:active 鼠标正在点击左键按着不放 a:visited 点击后
加载顺序一般我们是按照link - visited - hover - active 列表样式
list-style 列表样式 none | disc | decimal | square | circle list-style-type 列表样式none | decimal list-style-image 为列表设置图片样式等价于disc list-style-position 设置列表属性的位置 insade(在li之内) | outside (在li之外)
二、网页背景
background-color 背景颜色 background-image: url() 设置背景图片 background-repeat(设置背景重复方式): no-repeat(不重复) | repeat-x(横向重复) | repeat-y(纵向重复) background-position(背景定位)
三、x轴 y轴 颜色渐变
水平方式(left center right px像素) 垂直方式(top center bottom px像素) X轴百分比 y轴百分比 background-size(设置背景的尺寸): auto | cover | contain | percentage(x像素 y像素)线性渐变 background-image: linear-gradient(控制方向,颜色1,颜色2,颜色3……) 控制方向to left | to right | to top | to bottom | 40deg(代表多少度)径向渐变 background-image:radial-gradient(颜色1,颜色2,颜色3……)
四、盒子模型
HTML里的所有标签元素都是一个平面结构、由立体结构组成。这称为盒子模型 盒子模型的三要素 border 边框 margin 外边距 padding 内边距 使用经验结合left | right | top | bottom 来控制 border-width: 边框粗细thin | medium | thick | px border-style: 边框风格solid(细线) | dashed(虚线) | dotted(点线) | double(双实线) border-color: 边框颜色 margin实现网页居中 margin: 0px auto; margin-left: auto; margin-right: auto;
五、盒子三要素
参数都遵循顺时针方向 上 右 下 左 | 上下 左右 margin: 可以为负数 如 margin-top: -10px; padding: 不可以为负数 盒子计算box-sizing box-sizing: content-box border-box
1、 content-box含义
content-box默认盒子设置width属性之后内容的宽度就等于width属性 实际的宽度border padding width
2、 border-box含义
盒子设置width属性后实际的宽度等于width。如果设置border | padding 它自动的将内容的width减缩。 实际的宽度width 圆角边框 border-radius: 百分比 | 像素 给左上盒子设置圆角边框 border-top-left-radius: 50%; 盒子阴影 box-shadow: 盒子阴影类型 x轴阴影偏移量 y轴阴影偏移量 阴影模糊半径 颜色; 盒子阴影类型: inset(向内) box-shadow: inset 0px 0px 5px blue;
