HTML与CSS 任务二

于 2017-03-10 21:03:23 发布
阅读量364 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_32815935/article/details/61208172
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>任务二</h1></title>
  <style type="text/css">
       body
	   {
		   margin:0;
		   padding:0;
		   background-color:#D1D1D1;
	   }
	   div
	   {
		   margin-top:15px;
		   margin-bottom:15px;
		   margin-left:20px;
		   margin-right:20px;
		   padding:18px;
		   background-color:#FFF;
		   border-right:3px solid grey;
		   border-bottom:3px solid grey;
	   }
	   a
	   {
		   text-decoration:none;
		   float:right;
		   margin:20px;
		   font-size:small;
		   color:#FFF;
	   }
	   a:hover{color:yellow; text-decoration:underline;}  /*鼠标经过时*/
	   table,th,td{border: 1px solid #CCC; text-align:left;}
	   table{border-collapse:collapse;}
	   thead
	   {
		   background:#000;
		   color:#FFF;
	   }
	   tfoot
	   {
		   background:#CCC;
		   color:#000;
	   }
	   button
	   {
		   width:1200px;
		   height:25px;
		   color:white;
		   background:#06F;
		   font-size:medium;
	   }
       #head
	   {
		   margin:0;
		   padding:0;
		   height:60px;
	       background-color:#000;
	   }
	   #foot
	   {
		   margin:0;
		   padding:0;
		   height:40px;
	       background-color:#000;
		   text-align:center;
		   font-size:small;
		   color:white;
	   }
	   #image_1 
	   {
		   width:120px;
		   height:40px;
		   margin-top:10px;
		   margin-left:35px;
		   float:left;
	   }   
	   #image_2
	   {
		   width:300px;
		   height:300px;
	   }
	   #image_3
	   {
		   width:400px;
		   height:300px;
		   margin:10px;
		   border:1px solid #CCC;
		   padding-top:30px;
		   padding-right:15px;
		   padding-left:15px;
		   padding-bottom:15px;
	   }
	   #sidebar
	   {
		   margin-left:30px;
		   margin-right:30px;
		   text-align:center;
	   }
	   #text{color:#CCC; font-size:small;}
	   #text1{text-align:left;}
  </style>
</head>

<body>
<p id="head">
      <img id="image_1" src="baidulogo1_看图王.png" alt=""/>
      <a href="http://www.baidu.com">百度一下</a>
      <a href="http://ife.baidu.com">百度前端学院</a>
      <a href="http://pan.baidu.com">百度网盘</a>
      <a href="http://baike.baidu.com">百度百科</a> 
</p>
<div>
     <h1>HTML</h1>
     <h2>我的第一个HTML</h2>
     <p>作者;JGzui  时间：2017.2.27</p>
     <p>  第一次加入百度前端学院，之前一直想好好学一下前端，刷知乎刷到这个，来过的都在推荐，所以一直在等开班，希望这次能坚持下去。</p>
     <p>啊，这个说是很长很长的一段话，看来我要开始凑字数了。HTML指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。</p>
     <img id="image_2" src="1.png" alt="" />
     <p>好了，广告时间到，<a href="http://ife.baidu.com">百度前端学院</a>你值得<b>拥有!</b></p>
  </div>
  
  
  <div>
     <h1>文章一级标题</h1>
     <h2>文章二级标题</h2>
     <p>作者;JGzui  时间：2017.2.27</p>
     <p>  第一次加入百度前端学院，之前一直想好好学一下前端，刷知乎刷到这个，来过的都在推荐，所以一直在等开班，希望这次能坚持下去。</p>
     <p>啊，这个说是很长很长的一段话，看来我要开始凑字数了。HTML指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。</p>
     <img id="image_2" src="1.png" alt="" />
     <p>好了，广告时间到，<a href="http://ife.baidu.com">百度前端学院</a>你值得<b>拥有!</b></p>
     <ul>
       <li>小薇学院</li>
       <li>斌斌学院</li>
       <li>耀耀学院</li>
     </ul>
  </div>
  
  
  <div>
     <h2>图片</h2>
     <p>好看的图片</p>
     <img id="image_3" src="E:/日常/weibo/Maciej Dakowicz 趣味瞬间.jpg"  /><br/>
     <img id="image_3" src="E:/日常/weibo/Maciej Dakowicz 趣味瞬间1.jpg"  /><br/>
     <img id="image_3" src="E:/日常/weibo/Maciej Dakowicz 趣味瞬间2.jpg"  />
  </div>
  
  
  <div>
     <h1>学习总结</h1>
     <h2>HTML学习</h2>
  <p> JGzui  2017.2.27</p>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <p>表格</p>
  <table width="1200">
       <thead>
          <tr>
             <th width="400">姓名</th>
             <th width="400">数学</th>
             <th width="400">英语</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td width="400">小明</td>
             <td width="400">90</td>
             <td width="400">89</td>
          </tr>
          <tr>
             <td width="400">小红</td>
             <td width="400">90</td>
             <td width="400">91</td>
          </tr>
          <tr>
             <td width="400">小华</td>
             <td width="400">87</td>
             <td width="400">99</td>
          </tr>
       </tbody>
       <tfoot>
          <tr>
             <td width="400">总分</td>
             <td colspan="2">546</td>
          </tr>
       </tfoot>
  </table>
  </div>
  
  
  <div id="sidebar">
     <h2 id="text1">账号注册</h2>
     <form name="form" method="post" action="hh.html">
        请输入邮箱地址：<input type="text" /><br/>
        <p id="text"> 邮箱格式请按要求输入</p><br/>
          请输入密码:
        <input type="password" maxlength="16" /> <br/><br/>
        请重复输入密码: <input type="password" maxlenth="16" /> <br/>
        <p id="text">密码为6~16位数字英文</p>
        <p>性别<!--这里是为了让边框对齐才加了  -->
        <input type="radio" name="question1" value="boy" />男
        <input type="radio" name="question1" value="girl" />女</p>
        <p>城市
        <select size="1">
            <option>北京</option>
            <option>上海</option>
            <option>天津</option>
            <option>广州</option>
            <option>深圳</option>
            <option>重庆</option>
            <option>成都</option>
            <option>苏州</option>
            <option>西安</option>
            <option>长沙</option>
            <option>大连</option>
            <option>厦门</option>
         </select> </p>
         <p>爱好
         <input id="checkbox1" type="checkbox" /><label for="checkbox1">运动</label>
         <input id="checkbox1" type="checkbox" /><label for="checkbox1">艺术</label>
         <input id="checkbox1" type="checkbox" /><label for="checkbox1">科学</label> </p>
         <p>个人描述：<br/>
         <textarea rows="8" cols="60">这是一个多行输入框，请输入您的更让人描述</textarea> <br/>
         <button>确认提交</button> <br/></p>
      </form>
  </div>
  <p id="foot"><br/>版权所有&copy;</p>
</body>
</html>

JRzui
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值