Web02_HTML&CSS
HTML
表单标签属性介绍
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表单标签属性介绍</title>
</head> <body>
<form action="#" method="get">
隐藏标签：<input type="hidden" name="id" value="" /><br /> 用户名：
<input type="text" name="username" vplaceholder="请输入用户名" required="required" /><br /> 密码：
<input type="password" name="password" required="required" /><br /> 确认密码：
<input type="password" name="repassword" required="required" /><br /> 性别：
<input type="radio" name="sex" value="男" checked="" />男
<input type="radio" name="sex" value="女" />女<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="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br /> 自我介绍：
<textarea name="self"></textarea><br /> 提交按钮：
<input type="submit" value="注册" /><br /> 重置按钮：
<input type="reset" /><br />
</form>
</body> </html>
HTML
div演示效果
div是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用它主要用于对括起来的内容进行样式的修饰。
使用DIV+CSS完成首页重新布局.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2100px;
margin: auto;
} #logo {
border: 1px solid red;
width: 1300px;
height: 50px;
} .top {
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
} #top {
padding-top: 12px;
height: 50px;
} #menu {
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: orange;
} ul li {
display: inline;
color: white;
} #clear {
clear: both;
} #product {
border: 1px solid red;
width: 1300px;
height: 1000px;
} #product_top {
border: 1px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
} #product_bottom {
border: 1px solid green;
width: 100%;
height: 500px;
} #product_bottom_left {
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
} #product_bottom_right {
border: 1px solid blue;
width: 1094px;
height: 500px;
float: left;
} #big {
border: 1px solid red;
width: 544px;
height: 248px;
float: left;
} .small {
border: 1px solid blue;
width: 180px;
height: 248px;
float: left;
/*让里面的内容居中*/
text-align: center;
} #bottom {
text-align: center;
}
</style>
</head> <body>
<div id="father"> <!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear"> </div> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#">
<li style="font-size: 20px;">全部产品及服务 </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>
<a href="#">
<li>自助服务</li>
</a>
</ul>
</div> <!--3.轮播图-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div> <!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="../../img/微信截图_20170716005056.png" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/微信截图_20170716005056.png" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../../img/微信截图_20170716005056.png" width="100%" height="100%"></a>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div> <!--6.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">电信公告</a>
<a href="#">网站导航</a>
<a href="#">掌上营业厅</a>
</div>
</div>
</body> </html>
Web02_HTML&CSS的更多相关文章
- 【javaweb学习笔记】WEB02_HTML&CSS
一.表单相关知识 1.表单: 所有需要提交到服务器端的表单项必须使用<form></form>括起来 form标签属性(有两个): 1)action,整个表单提交的位置(可以是 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- java7连接数据库 网页 添加学生信息测试
石家庄铁道大学2019年秋季 2018 级课堂测试试卷(六)(10分) 课程名称: JAVA语言程序设计 任课教师: 王建民 考试时间: 150 分钟 一. 考试要求: 1登录账号 ...
- 阅读之https及加密原理
HTTPS(全称:Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版. 为什么需要https 使用htt ...
- 表空间及段区块的一些sql语句和视图
查询段情况的语句 select segment_name,blocks,extents,bytes,segment_type,tablespace_namefrom dba_segments wher ...
- node监视文件或者文件夹的变化
1.node提供一个watch这个API,可以监视文件或文件夹的变化,当发生改变时,做出某些操作.(当做代码本地构建时,经常使用) const fs = require('fs'); fs.watch ...
- ping —— 虚拟机
1. 主机ping 虚拟机 ping 不通 设置——虚拟机—— 防护墙——入站规则—— 文件和打印共享 (回显请求-ICMPv4-In) 2.主机连接不上虚拟机中的sqlsrver 设置— ...
- jprofiler 监听远程java项目
1.下载.安装windows和linux版的jprofile.注意:若监控的是springboot.springcloud项目,切记本地和服务器上的jprofile要版本保持一致,本人亲自踩过坑. 官 ...
- Codeforces Round #303 (Div. 2) D. Queue 水题贪心
题目: 题意:给你n个数值,要求排列这个序列使得第k个数值的前K-1个数的和>=第k个数值的个数尽可能多: #include <iostream> #include <cstd ...
- Python实用黑科技——找出序列里面出现次数最多的元素
需求: 如何从一个序列中快速获取出现次数最多的元素. 方法: 利用collections.Counter类可以解决这个问题,特别是他的most_common()方法更是处理此问题的最快途径.比如,现在 ...
- Selenium 文件下载
点击文件下载时,弹出的那个框,webdriver是定位不到的,只有通过第三方工具或方法来操作 一.通过PyUserInput模拟键盘按键下载 PyUserInput是模拟鼠标和键盘的一个模块,替代了p ...
- ubuntu开启ssh服务时，报：start:Unknown job : ssh
这里是参考网站资料,并记录下. 如图所示: 解决方法: 输入以下命令即可 /usr/sbin/sshd mkdir /var/run/sshd /usr/sbin/sshd netstat -nlt ...