JavaWeb基础知识:Html与Css基础入门
2016-07-23 01:10
706 查看
html与css基础入门
1.html的常见标签和实战
1.1 a标签
<a href="https://www.baidu.com" target="_blank">点我送福利哦!</a> // target属性值_blank表示另取空白页打开网页,用new有同样的效果
1.2 img标签
<img src="plmm.jpg" width="100px" height="200px" alt="图片信息丢失!"/> // alt属性的值表示当图片找不到时显示的文字信息
1.3 列表标签
<ol type="I" start="1"> <li>我是天才1号</li> <li>我是天才2号</li> <li>我是天才3号</li> <li>我是天才4号</li> </ol> <ul type="circle"> <li>我是逗逼1号</li> <li>我是逗逼1号</li> <li>我是逗逼1号</li> <li>我是逗逼1号</li> </ul> <dl> <dt>日记第一天</dt> <dd>好兴奋啊要上课了</dd> <dt>日记第二天</dt> <dd>晚上要早点睡觉</dd> <dt>日记第三天</dt> <dd>真的心累啊热啊</dd> </dl> /* ol(ordered list):有序 li(list item):列表项 ul(unordered list):无序 dl(defined list):自定义 dt(defined title):自定义标题 dd(defined document):自定义内容 */
1.4 表格标签
<table align="center" border="1" cellspacing="0" width="80%"> <h3 align="center">考试信息登记表</h3> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> </tr> <tr align="center"> <td>小二</td> <td>17</td> <td>男</td> <td>99</td> </tr> <tr align="center"> <td>小三</td> <td>19</td> <td>女</td> <td>86</td> </tr><tr align="center"> <td>小四</td> <td>17</td> <td>男</td> <td>100</td> </tr><tr align="center"> <td>小五</td> <td>20</td> <td>男</td> <td>59</td> </tr> </table> /* table属性:border表示边框,cellpadding表示表格内边距,spacepadding表示表格外边距 td属性:rowspan表示合并的行数,colspan表示合并的列数 */
1.5 表单标签
<form action="#" method="get"> 用户名:<input type="text" name="username"/><br/> 密码:<input type="password" name="password" /><br> <input type="submit" value="登录" /> <br/> <input type="radio" name="gender" value="nan" />男 <input type="radio" name="gender" value="nv" />女 <br> <input type="checkbox" name="play" value="lanqiu" />篮球 <input type="checkbox" name="play" value="zuqiu" />足球 <input type="checkbox" name="play" value="paiqiu" />排球 <input type="checkbox" name="play" value="qiu" />乒乓球 <br> <select name="city"> <option>深圳</option> <option>北京</option> <option>上海</option> </select> </form>
实战1:1024网站入口
先来看一下效果图![](http://i.imgur.com/5NLv1AI.png)
* 用到的图片如下
![](http://i.imgur.com/pkwye9M.png)
![](http://i.imgur.com/XW8O46U.png)
代码如下
<p align="center"> <img src="img/logo6.png" /> </p> <p align="center"><font color="red" size="5"><b>警告 / WRANNING</b></font></p> <p align="center"> 本物品內容可能看不明白;不可將本物品內容派發,傳閱,出售,出租,交給 或出借予年齡非程序猿的人士出示,播放或播映。 </p> <p align="center"> This article contains material which may offernd and may not be distributed, circulated, sold, hired, given, lent, shown, played or projected to a person under the age of 18 years. All models are 18 or older. <p align="center"> <a href="http://www.baidu.com" target="_blank"><img src="img/click.png" alt="图片已经丢失!" /></a> </p>
实战2:世纪佳缘注册页面
先来看一下效果图![](http://i.imgur.com/U1huYkX.png)
* 用到的图片如下
![](http://i.imgur.com/vC8rACp.jpg)
* 代码如下
<form action="http://www.pinger.com/register" method="GET"> <h4 align="center">世纪佳缘征婚注册表</h4> <table align="center" background="img/plmm.jpg"> <tr> <td>用户名:</td> <td> <input type="text" name="username" /> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="gender" value="man" />男 <input type="radio" name="gender" value="wuman" />女</td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="happy" value="lanqiu" />篮球 <input type="checkbox" name="happy" value="zuqiu" />足球 <input type="checkbox" name="happy" value="paiqiu" />排球 <input type="checkbox" name="happy" value="wmx" />玩毛线</td> </tr> <tr> <td>城市:</td> <td> <select name="city"> <option>深圳</option> <option>江西</option> <option>贵州</option> <option>湖南</option> <option>吉林</option> <option>湖北</option> </select> </td> </tr> <tr> <td>个人宣言:</td> <td> <textarea> </textarea> </td> </tr> <th></th> <tr> <th colspan="2"> <input type="submit" value="注册" /> </th> </tr> </table> </form>
2.css的使用
2.1 盒子模型
<html> <head> <meta charset="utf-8"> <title></title> <style> .div1{ width:200px; height:200px; background-color: red; padding: 50px; border: 5px; } .div2{ background-color: blue; width:100px; height:100px; padding: 20px; } </style> </head> <body> <div class="div1"> 我是个天才 <div class="div2"> 我是个小天才 </div> </div> </body> </html>
2.2 css的三种选择器
css获取html中的div有三种方式:类选择器,元素选择器,名称选择器。第一种是在div属性中定义一个class属性,然后在css中通过#来引用定义的值,同理第二种是通过.来引用,第三种是通过div名称来引用。导入css样式到html中也有三种方式,如@import url(“css/style.css”);获取@import url(css/style.css);都可以
代码如下
<head> <meta charset="utf-8" /> <title></title> <style> @import url("css/style.css"); div{ background-color: red; } </style> </head> <body> <div class="div1">这是第一块DIV区域</div> <div class="div2">这是第二块DIV区域</div> <span id="span1">这是第一块span区域</span> <span id="span2">这是第二块span区域</span> <div>我是个天才</div> </body>
2.3 流式布局
<html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width: 200px; height: 200px; background-color:aliceblue; margin-top: 30px; /* 外边距 */ margin-left: 50px; padding: 30px; /* 内边距 */ border-style: ridge; border-color: coral; border-width: 2px; position: relative; float: left; } #div2{ width: 200px; height: 200px; background-color:aliceblue; margin-top: 30px; /* 外边距 */ margin-left:10px; padding: 30px; /* 内边距 */ border-style: ridge; border-color: coral; border-width: 2px; position: relative; float: left; } #div3{ width: 200px; height: 200px; background-color:aliceblue; margin-top: 30px; /* 外边距 */ margin-left:10px; padding: 30px; /* 内边距 */ border-style: ridge; border-color: coral; border-width: 2px; position: relative; float: left; } </style> </head> <body> <div id="div1">div1中的内容</div> <div id="div2">div2中的内容</div> <div id="div3">div3中的内容</div> </body> </html>
相关文章推荐
- java-WEB中的监听器Lisener
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析