创意产品设计网站推荐,个人网页制作模板田田田田田田田田,友汇网站建设,如何 做网站CSS#xff1a;页面美化和布局控制 1. 概念#xff1a; Cascading Style Sheets 层叠样式表层叠#xff1a;多个样式可以作用在同一个html的元素上#xff0c;同时生效 2. 好处#xff1a;(1)功能强大(2)将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作…CSS页面美化和布局控制 1. 概念 Cascading Style Sheets 层叠样式表层叠多个样式可以作用在同一个html的元素上同时生效 2. 好处(1)功能强大(2)将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用CSS与html结合方式共3种(1)内联样式 * 在标签内使用style属性指定css代码 * 如div stylecolor:red;hello css/div(2) 内部样式 * 在head标签内定义style标签style标签的标签体内容就是css代码 (3)外部样式 第一步定义css资源文件。 第二步在head标签内定义link标签引入外部的资源文件 注意 * 1,2,3种方式 css作用范围越来越大 * 1方式不常用后期常用2,3(掌握) !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--内部样式--!--style--!--div{--!--color: blue;--!--}--!--/style--link relstylesheet hrefcss/day1.css
/head
body!--内联样式--!-- * 在标签内使用style属性指定css代码--div stylecolor: red hello world/divdiv hello world1/divdiv hello world2/div/body
/html 4. css语法格式 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }选择器:筛选具有相似特征的元素 * 注意 每一对属性需要使用隔开最后一对属性可以不加 5.选择器筛选具有相似特征的元素分类 (1)基础选择器 1id选择器选择具体的id属性值的元素.建议在一个html页面中id值唯一 语法#id值{} 2元素选择器选择具有相同标签名称的元素 语法 标签名称{} 注意id选择器优先级高于元素选择器 3类选择器选择具有相同的class属性值的元素。 语法.class属性值{} 注意类选择器选择器优先级高于元素选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#div1{color: red;}div{color: antiquewhite;}.class1{color: aqua;}/style
/head
bodydiv iddiv1hello/divdiv world/divdiv classclass1world/div
/body
/html (2)扩展选择器 1选择所有元素 语法 *{} 2并集选择器(相同样式比较实用) 选择器1,选择器2{} 3子选择器筛选选择器1元素下的选择器2元素 语法 选择器1 选择器2{} 4父选择器筛选选择器2的父元素选择器1 语法 选择器1 选择器2{} 5属性选择器选择元素名称属性名属性值的元素 语法 元素名称[属性名属性值]{} 6 伪类选择器选择一些元素具有的状态 语法 元素:状态{} * 如 a * 状态 * link初始化的状态 * visited被访问过的状态 * active正在访问状态 * hover鼠标悬浮状态 6. 属性 (1)字体、文本 * font-size字体大小 * color文本颜色 * text-align对其方式 * line-height行高 (2)背景 * background (3)边框 * border设置边框复合属性 (4) 尺寸 * width宽度 * height高度 (5)盒子模型控制布局 * margin外边距 * padding内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性让width和height就是最终盒子的大小 * float浮动 * left * right 7.案例 !DOCTYPE html
html langen
headmeta charsetUTF-8title注册页面/titlestylebody{/*设置背景图片*/background: url(img/register_bg.png);}.div_left{float: left;margin: 15px;}.div_center{float: left;}.div_right{float: right;margin: 15px;}.rg_layout{width: 900px;height: 500px;border: 5px solid #eeeeee;background-color: white;/*让div水平居中*/margin: auto;margin-top:15px;}.p_rg1{color: #ffd026;font-size: 20px;}.p_rg2{color: #a6a6a6;font-size: 20px;}.p_rg3{font-size: 15px;}.a_rg{color: pink;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 45px;}#username,#password,#checkcode,#email,#name,#tel,#birthday{width: 250px;height: 32px;border: 1px solid #a6a6a6;border-radius: 5px;padding-left: 10px;}#checkcode{width:110px ;}#img_check{height: 32px;vertical-align: middle;}#btn_sub{width: 120px;height: 40px;background-color: #ffd026;border: 1px solid #ffd026;}/style
/head
bodydiv classrg_layoutdiv classdiv_leftp classp_rg1新用户注册/pp classp_rg2USER REGISTER/p/divdiv classdiv_centerdiv classrg_form!--定义表单 form--form action# methodposttabletrtd classtd_leftlabel forusername用户名/label/tdtd classtd_rightinput typetext nameusername idusername placeholder请输入用户名/td/trtrtd classtd_leftlabel forpassword密码/label/tdtd classtd_rightinput typepassword namepassword idpassword placeholder请输入密码/td/trtrtd classtd_leftlabel foremailEmail/label/tdtd classtd_rightinput typeemail nameemail idemail placeholder请输入邮箱/td/trtrtd classtd_leftlabel forname姓名/label/tdtd classtd_rightinput typetext namename idname placeholder请输入姓名/td/trtrtd classtd_leftlabel fortel手机号/label/tdtd classtd_rightinput typetext nametel idtel placeholder请输入手机号/td/trtrtd classtd_leftlabel性别/label/tdtd classtd_rightinput typeradio namegender valuemale 男input typeradio namegender valuefemale 女/td/trtrtd classtd_leftlabel forbirthday出生日期/label/tdtd classtd_rightinput typedate namebirthday idbirthday placeholder请输入出生日期/td/trtrtd classtd_leftlabel forcheckcode 验证码/label/tdtd classtd_rightinput typetext namecheckcode idcheckcode placeholder请输入验证码img idimg_check srcimg/verify_code.jpg/td/trtrtd colspan2 aligncenterinput typesubmit idbtn_sub value注册/td/tr/table/form/div/divdiv classdiv_rightp classp_rg3已有账号?a href# classa_rg立即登录/a/p/div/div
/body
/html 效果图 转载于:https://www.cnblogs.com/luckyplj/p/11203362.html
