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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- maven 学习之路之二(1)
上次我简单讲了maven的安装和构建生命周期. 这一篇博客我将用实际项目来分享下maven整个构建生命周期的具体使用: 这次我将用maven做一个自己写程序的一个模版程序. 自己实现一个简单的页面登录 ...
- mysql innodb存储引擎 锁 事务
以下内容翻译自mysql5.6官方手册. InnoDB是一种通用存储引擎,可平衡高可靠性和高性能.在MySQL 5.6中,InnoDB是默认的MySQL存储引擎.除非已经配置了不同的默认存储引擎, ...
- h5css3_01
一.什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语 ...
- electron-vue 引入 vue.ant.design报错
ERROR in ./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader!./node_modules/less ...
- sublime开发工具各类配置和插件的安装
1.css颜色提示 惯例两步: ctrl+shift+p Install package 手动输入color Highlighter 注意,一定要手动输入,复制粘贴回车会没有反应,一般手动输入colo ...
- spark 任务导致tmp目录过大
现象:hdp的集群没有配置spak的临时本地目录,默认在跑程序的时候会将中间过程的文件存放在本地的/tmp目录下 如果跑的spark数据量过大,就会导致/tmp下文件过大,最终导致根分区被占满,系统崩 ...
- Python天天学_04_基础四
Python_day_04 金角大王: http://www.cnblogs.com/alex3714/articles/5765046.html ------Python是一个优雅的大姐姐 学习方式 ...
- 51 Nod 1486 大大走格子
1486 大大走格子 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 收藏 关注 有一个h行w列的棋盘,里面有一些格子是不 ...
- 【杂题】[AGC034F] RNG and XOR【集合幂级数】【FWT】【DP】
Description 你有一个随机数生成器,它会以一定的概率生成[0,2^N-1]中的数,每一个数的概率是由序列A给定的,Pi=Ai/sum(Ai) 现在有一个初始为0的数X,每一轮随机生成一个数v ...
- R_Studio(时序)Apriori算法寻找频繁项集的方法
应用ARIMA(1,1,0)对2015年1月1日到2015年2月6日某餐厅的销售数量做为期5天的预测 setwd('D:\\dat') #install.packages("forecast ...