Day_05(html5,css)
html:根标签
head:存放页面的重要信息一般不再页面上显示
title:标题标签
meta:存放页面的重要信息不在页面显示
link:样式
style:样式
body:存放页面上需要展示的内容
form表单子标签属性
name属性:
给单选框或者复选框进行分组,在当前组内进行单选.
输入框的值要想提交给服务器,那么输入框必须要有name属性
value属性:
给按钮起名称
设置提交给服务器的值
disableed=“disableed”:设置标签可不用
readonly="readonly"设置文本框只读
给表单中的标签添加默认值:text和password用value属性;radio和checkbox用checked=“checked”;select下拉选需要给option标签添加selected=“selected”
placeholder="";设置输入框灰色的显示文字
select下拉选是一组标签配合option使用,size属性是展示的个数.multiple="multiple"设置下拉选可以多选
textare 文本域,
格式:
属性:rows:行 只是展示初始化文本框的大小无意义
cols:列 只是展示初始化文本框的大小无意义
form表单属性
action:表单提交的路径
method:设置表单提交的方式
div+css
css语法:选择器{css属性:属性值;css属性:属性值;}
css和html整合方式:行内样式,内部样式,外部样式 优先级(行内>外部|内部(就近原则))
行内样式:直接添加style属性即可
内部样式:在head里面添加标签,在标签中写样式即可
eg:
<head> <meta charset="UTF-8"> <title>整合css</title> <!--2:内部样式 <style> 选择器{//选择页面中指定的标签 css样式:值; css样式:值; } </style> --> <style> #divid1{ background-color: green; } </style> </head> <body> <!--1:行内样式--> <div style="background-color: #FFE388">如今的现在早已不是曾经说好的以后</div> <div id="divid1">如今的现在早已不是曾经说好的以后</div> <div id="divid2">如今的现在早已不是曾经说好的以后</div> </body>
外部样式:
first.css
#divid2{ background-color: #FC8989; }
class选择器
给一类标签设置相同的样式
通过.class的名称选中这类标签
标签选择器
<head> <style> span{ background-color: red; } </style> </head> <body> <span>哈哈</span> <span>哈哈</span> <span>哈哈</span> </body>
选择器的优先级:id>class>标签
css样式
浮动:切记用到浮动就要清除浮动
未添加浮动之前div是竖着展示的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动与清除浮动</title> <style> .cls{ border: 1px solid red; width: 50px; height: 50px; float: left; } </style> </head> <body> <div class="cls">1</div> <div class="cls">2</div> <div class="cls">3</div> <div class="cls">4</div> </body> </html>
浮动之后
清除浮动:
清除浮动然后在浮动下一排
<head> <meta charset="UTF-8"> <title>浮动与清除浮动</title> <style> .cls{ border: 1px solid red; width: 50px; height: 50px; float: left; } .clr{ clear: both; } </style> </head> <body> <div class="cls">11</div> <div class="cls">12</div> <div class="cls">13</div> <div class="cls">14</div> <div class="clr"></div> <div class="cls">21</div> <div class="cls">22</div> <div class="cls">23</div> <div class="cls">24</div> </body>
显示类型:
<div>你好</div> <span>我的</span> <span>大中国</span> //会显示两行,div独占一行,两个span标签在一行,因为span标签是行内标签 • 1 • 2 • 3 • 4
<head> <style> #sp{//把span的行内标签变为行级标签 display:block; } div{//把行级标签变为行内标签 display:inline; } #sp{//隐藏不显示 display:none; } </style> </head> <body> <div>你好</div> <span>我的</span> <span id="sp">大中国</span> </body>
框模型(盒子模型)
内边距 边框和内容之间的距离 padding:(顺时针 上右下左) padding:20px;上下左右 padding:20px上下;30px左右; ..... 外边距 边框和相邻边框的距离 margin:(顺时针 上右下左) box-sizing:怪异的盒子(border-box) 一旦设置完宽高则代表整个div的宽高 块级元素居中 margin:auto
demo用户主页页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0px; margin: 0px; box-sizing: border-box; } #outDiv{ width: 888px; height: 550px; border: 8px solid #eee; margin: 20px auto; } #id1,#id2,#id3{ float: left; height: 530px; } #id1{ width: 28%; padding-top: 20px; padding-left: 20px; } #id1 > p:first-child{ font-size: 20px; color: #FFE388; } #id1 > p:last-child{ font-size: 20px; color: #A6A6A6; } #id2{ width: 40%; padding-top: 20px; } #id2 .lf{ width: 30%; text-align: right; padding-right: 20px; } #id2 .rt{ height: 50px; } input[type="text"], input[type="date"], input[type="password"] { width: 256px; /* 行高与高度相同，则表示垂直居中 */ height: 32px; line-height: 32px; padding: 6px 12px; border-radius: 4px; border: 1px solid #a6a6a6; float: right; } #id3{ width: 28%; } #id3 > p{ padding-top: 20px; text-align: right; } #id3 > p > a{ color: #FC8989; } </style> </head> <body> <div id="outDiv"> <div id="id1"> <p> 新用户注册 </p> <p>USER REGISTER</p> </div> <div id="id2"> <form action="#" method="get"> <table> <tr> <td class="lf">用户名</td> <td class="rt"><input id="name" type="text" name="name" placeholder="请输入用户名"/></td> </tr> <tr> <td class="lf">密码</td> <td class="rt"><input id="pwd" type="password" name="pwd" placeholder="请输入密码" /></td> </tr> <tr> <td class="lf">Email</td> <td class="rt"><input type="text" id="email" name="email" placeholder="请输入邮箱"/></td> </tr> <tr> <td class="lf">姓名</td> <td class="rt"><input type="text" id="username" name="username" placeholder="请输入真实名称"/></td> </tr> <tr> <td class="lf">手机号</td> <td class="rt"><input type="text" id="phone" name="phone" placeholder="请输入手机号" /></td> </tr> <tr> <td class="lf">性别</td> <td class="rt"><input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0"/>女 </td> </tr> <tr> <td class="lf">生日</td> <td class="rt"><input type="date" id="birthday" name="birthday" placeholder="请输入生日" /></td> </tr> <tr> <td class="lf">验证码</td> <td class="rt"><input type="text" id="code" name="birthday" placeholder="输入验证码" /></td> </tr> </table> </form> </div> <div id="id3"> <p>已有账号？ <a href="#">立即登录</a></p> </div> </div> </body> </html>
