网站建设服务合同样本,网站怎么做前后台存取,广告设计制作服务方案,网站制作2019趋势day46
CSS
练习
页面实现#xff1a; 分析#xff1a; 未优化#xff1a; 优化#xff1a; 参考代码#xff1a;#xff08;包含样式优化–选择器CSS属性#xff09; 先写上table方便实现#xff0c;之后再去除即可 name没有服务器#xff0c;可暂时不写 !…day46
CSS
练习
页面实现 分析 未优化 优化 参考代码包含样式优化–选择器CSS属性 先写上table方便实现之后再去除即可 name没有服务器可暂时不写 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle.right{text-align: right;}span{font-size: 11px;color: gray;}#sub{background-color: green;color: white;border: green;border-radius: 3px;}/* 设置垂直居中也叠加效果*/.xxx{display: flex; /* 设置弹性盒*/justify-content: center flex-start;}/style/headbodyform action# methodposttable width600pxtrtd classrightspan邮件地址/span/tdtdinput typetext placeholder建议使用手机号注册 /selectoption163/optionoptionQQ/optionoptionsina/option/select/td/trtrtd/tdtdspan6~18字符可使用字母、数字、下划线需以字母开头/span/td/trtrtd classrightspan密码/span/tdtdinput typepassword //td/trtrtd/tdtdspan6~16个字符区分大小写/span/td/trtrtd classrightspan确认密码/span/tdtdinput typepassword //td/trtrtd/tdtdspan再次确认密码/span/td/trtrtd classrightspan手机号/span/tdtdinput typetext //td/trtrtd/tdtdspan忘记密码时可以通过该手机号码快速找回密码/span/td/trtrtd classrightspan验证码/span/tdtd classxxxinput typetext /img srchttps://www.xiaoyuxitong.com/uploads/allimg/180816/214SMU3-0.png width100px height20px /a href#看不清楚换张图片/a/td/trtrtd/tdtdspan请填写图片中的字符不区分大小写/span/td/trtrtd/tdtdbutton免费获取验证码/button/td/trtrtd classrightspan短信验证码/span/tdtdinput typetext //td/trtrtd/tdtdspan请查收手机短信并填写短信中的验证码/span/td/trtrtd/tdtdinput typecheckbox checkedchecked /span同意a href#服务条款/a和a href#隐私权相关政策/a/span/td/trtrtd/tdtdinput idsub typesubmit value立即注册 //td/tr/table/form/body
/html
常用CSS样式
常用CSS属性 1.字体属性 属性名称 font-family(字体) font-size大小 font-style风格 ---- normal标准样式 ---- italic斜体 ---- oblique倾斜 ---- inherit从父类继承的字体样式 font-weight(字体加粗) ----normal标准样式 ----bold粗体 ----bolder更粗 ----lighter更细 2.文本属性 属性名称 letter-spacing(字母间隔) text-decoration划线修饰 text-align文本对齐方式 text-indent(文本缩进) line-height行高 3.背景 属性名称 background-color background-image background-repeat(平铺方式) 4.边框 属性名称 border-bottom solid(实线) dashed(虚线) double(双实线 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssp{/*设置字体样式-------------------------------------------*/font-family: 微软雅黑;/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式 - 倾斜*/font-weight: bold;/*设置字体粗细*//*设置文本样式-------------------------------------------*/letter-spacing: 20px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线 - 下划线*/text-align: center;/*设置文本对齐方式 -- 居中*/color: white;/*设置文本颜色*//*设置背景样式 --------------------------------------------*/background-color: red;/*设置背景颜色*/}a{text-decoration: none;/*设置字体划线 - 去除划线*/}div{width: 500px;height: 500px;background-image: url(../img/波多野结衣.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置平铺方式沿y轴平铺*/border: orange 1px solid;/*设置边框 - 颜色,粗细,实线*/}/style/headbodyp学无止境/pa href#百度一下/abr /div/div/body
/html
运行
盒子模型 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 盒子模型 用于页面分区 浏览器兼容性 一旦为页面设置了恰当的 DTD大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范元素内容占据的空间是由 width 属性设置的而内容周围的 padding 和 border 值是另外计算的。不幸的是IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度而是内容、内边距和边框的宽度的总和。 虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是不要给元素添加具有指定宽度的内边距而是尝试将内边距或外边距添加到元素的父元素和子元素。 为了兼容IE老版本一句话能用外边距就用外边距 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;/** margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;;设置外边距 - 右边距margin-bottom: 50px;;设置外边距 - 下边距*/margin: 50px;} /style/headbodydiv学无止境/div/body
/html
样式2内边距style typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;/** 注意能不使用内边距就不使用因为老版本的IE浏览器不支持而且会把盒子撑变形* * padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;/*设置内边框上下左右都是*/} /style
样式3水平居中垂直居中需要用到定位style typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/} /style运行
定位 CSS 定位 (Positioning) 属性允许你对元素进行定位。 定位的基本思想很简单它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 CSS 定位机制 CSS 有三种基本的定位机制普通流、浮动和绝对定位。 除非专门指定否则所有框都在普通流中定位。也就是说普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列框之间的垂直距离是由框的垂直外边距计算出来。 相对定位 相对定位相对于原有的位置发生改变并且保留原有的空间位置。 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位保留原有位置相对于原有位置进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv idbox03/div/div/body
/html
运行
绝对定位 注意不能简单认为是根据body标签位移 绝对定位相对于他有position属性的父级元素进行定位如果父级元素没有postion定位那么就找父级的父级直到向上找到position定位为止如果他向上找不到position定位那么就以最外层的body进行定位。 并且绝对定位不会保留原有的位置空间。 z-index属性确定层级大小用来设定哪一个盒子在上面越大越在上面 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位不保留原有位置向上找寻父级标签判断父级标签是否有position属性如果有就按照父级标签进行位移如果没有就继续向上找寻父级标签直到body标签为止就按照body标签进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv idbox03/div/div/body
/html
运行
固定定位 根据前面的锚链接改进加一个置顶功能 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{position: fixed;/*固定定位将元素固定到页面的某个位置*/top: 80%;left: 90%;}/style/headbodydiva href#top置顶/a/diva nametop/a!--下锚点--a href#new01法治/a!--定位到锚点处--a href#new02国际/a!--定位到锚点处--a href#new03娱乐/a!--定位到锚点处--a namenew01/a!--下锚点--h1法治新闻 - 为何半夜母猪频频惨叫/h1h1法治新闻 - 为何八旬老太以外怀孕/h1h1法治新闻 - 是人性的溟灭/h1h1法治新闻 - 是道德的沦丧/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1a namenew02/a!--下锚点--h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1a namenew03/a!--下锚点--h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1/body
/html
运行
浮动 浮动可以帮助我们更好进行页面排版使原本竖着排列的盒子可以横向排列起来。 副作用因为浮动会使元素脱离了标准的文档流从而导致父级元素无法被撑开。 解决办法添加空盒子 在被浮动的元素后面添加一个空的div并且设置一个clear类并付给该div.clear{clear:both;} 普通流【包含的普通流变成浮动流就管不住利用清除浮动效果就能解决】 浮动1
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv classclear/div/div/body
/html 运行形象概述最初【一个大div包含两个小div】–再是【将里面的两个小div设置浮动大div管不住小div】–最后【在里面加一个小div用于去除同级别的浮动效果大div又能管住小div】 浮动2 浮动成左右两边 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: right;}.clear{clear: both;/*清除浮动效果*/}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv classclear/div/div/body
/html
运行
浮动3 浮动成左右两半 如何查看两种方式 设置背景颜色background-color:查看元素在浏览器检查代码 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv classclear/div/div/body
/html
运行注意这里是去除了box01、box02的边框不然会出现换行
扩展样式 渐变色找到图片最下方的一个色点【末尾加上】会自动填充 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssbody{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{border-radius: 50%;}/style/headbodyinput typebutton value普通按钮 /br /img src../img/波多野结衣.jpg width100px height100px //body
/html
运行
小结 css表单练习 常用CSS样式 盒子模型 定位 浮动 扩展样式
