HTML表单
今天使用表单<form>写了注册页面。
表单标签<form>
<input>
- text
- password
- radio ——单选
- checkbox——多选
- hidden——隐藏字段
- submit
- file
- reset
- button
<select>
- option
<textarea
表单标签:<form>
- action属性:请求路径,服务器地址
- method属性:请求方式,get 提交的数据追加在请求路径上, post 不追加不显示。
输入域标签:<input>
- name属性
- value属性
- size属性
- readonly属性
- maxlength属性
下拉列表标签:<select>
- name
- multiple属性:多选,默认单选
- option子标签
- selected:勾选当前选项
- value:发送给服务器的选项值
文本域标签:<textarea>
- cols属性
- rows属性
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" /><br />
用户名:<input type="text" name="username" size="40px" maxlength="5" readonly="readonly" placeholder="请输入用户名"/><br />
密码: <input type="password" name="password" /><br />
确认密码:<input type="password" name="repassword" /><br />
性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked" />女<br />
爱好:<input type="checkbox" name="hobby" value="钓鱼" />钓鱼
<input type="checkbox" name="hobby" value="打电动" />打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked" />写代码<br />
头像:<input type="file" name="file" /><br />
籍贯:<select name="province">
<option>---请选择---</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍:<textarea name="zwjs"></textarea><br />
提交按钮:<input type="submit" /><br />
普通按钮:<input type="button" value="注册" /><br />
重置按钮:<input type="reset" value="重置" /><br />
</form>
</body>
DIV+CSS重写网站首页
css的引入
- 行内引入
- 内部引入
- 外部引入:<link rel=“stylesheet” type=“text/css” href = “ ”
css的选择器
- ID选择器:#id属性名{} id保证唯一
- 类选择器:.类名{}
- 元素选择器:元素名{}
- 层级选择器:一层层的标签,空格隔开{}
- 属性选择器:标签名[标签属性 = ‘标签属性值’] {} -
div+css布局
第一步:先定义个大的 div,然后嵌套 8 个小的 div。
第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div
第三步:(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)
第四步:(第三行)在小 div 里面放置一张图片
第五步:(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div,最后一在右
边的 div 里面嵌套 10 个 div)
第六步:(第五行)在小 div 里面放置一张广告图片
第七步:(第六行)复制第四行的代码
第八步:(第七行)在小 div 里面放置一张广告图片
第九步:(第八行) 在小 div 里面放置超链接和文字内容。
<style>
#father{
border:0px solid red;
width:1300px;
height:2170px;
margin:auto;
}
#logo{
border:0px solid black;
width:1300px;
height:50px;
}
.top{
border:0px solid blue;
width:33.2%;
height:50px;
float:left;
}
#top{
padding-top:15px;
height:35px;
}
#menu{
border:0px solid red;
width:1300px;
height:50px;
background-color:black;
}
ul li{
display:inline;
color:white;
}
#product{
border:0px solid red;
width:1300px;
height:566px;
}
#product_top{
border:0px solid blue;
width:100%;
height:45px;
padding-top:8px;
}
#product_bottom{
border:0px solid green;
width:100%;
height:510px;
}
#product_bottom_left{
border:0px solid red;
width:200px;
height:510px;
float:left;}
#product_bottom_right{
border:0px solid blue;
height:510px;
width:1096px;
float:left;}
#big{
border:0px solid red;
width:546px;
height:253px;
float:left;}
.small{
border:0px solid blue;
width:181px;
height:253px;
float:left;
text-align:center;}
#bottom{
text-align:center;}
a{
text-decoration:none;}
</style>
</head>
<body>
<div id="father">
<!--logo部分-->
<div id="logo">
<div class="top">
<img src="img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="img/header.png" height="46px"/>
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!-- 导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size:18px">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>
</div>
<!-- 轮播图片-->
<div id="">
<img src="img/1.jpg" width="100%" />
</div>
<!--最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size:25px;">最新商品</span>
<img src="img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="img/middle01.jpg" width="100%" height="100%"></a>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
</div>
</div>
</div>
<!--广告图片-->
<div id="">
<img src="img/ad.jpg" width="100%" />
</div>
<!--热门商品-->
<div id="product">
<div id="product_top">
<span style="font-size:25px;">热门商品</span>
<img src="img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="img/middle01.jpg" width="100%" height="100%"></a>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
<div class="small">
<img src="img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">��399</p>
</div>
</div>
</div>
</div>
<!--广告图片-->
<div id="">
<img src="img/footer.jpg" width="100%" />
</div>
<!--友情链接-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright @ 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
昨天的table的嵌套分割布局有局限性,不如div+css更灵活,div+css应用的更灵活广泛,它可以浮动,更加合理方便的划分整体的布局。