导航，头部，CSS基础

1.制作自己的导航条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0076设计之作</title>
</head>
<body>
      <nav>
          <img src="http://img.zcool.cn/community/01b9bd574c5bbc6ac72525ae97b9f5.jpg"width="65" height="40">
          <a href="">首页</a>
          <a href="http://www.jianshu.com/">下载APP</a>
          <input type="text"name="serach">
          <button type="submit">搜索</button>
          <a href="">登录</a>
          <a href="">注册</a>

      </nav>

<body style="text-align:center">
    <h1></h1>
    <h3 style="text-align:center">每日一句</h3>
    <p>无数琐事侵蚀着我们的精力。今日是健身计划的开始，明天又到了预定中的减肥成效检验日。京东天猫的狂欢节，又让很多人兴奋了一个通宵。美剧韩剧国产剧，一剧又一剧。</p>
    <p>虽然活的苟且，但生活一定还要有梦想。于是，我们来回奔波于梦想和理想之间，时而做做这个，时而做做那个。仿佛只有这样用力地生活，我们才觉得生活得很有价值</p>
    <p>但是你有没有发现：我们每天这样忙碌，生活反而乱糟糟的？</p>
    <img src="//upload-images.jianshu.io/upload_images/3682352-d575dbb033a47a7e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="300" height="300"></a>
    <br><a style="text-align:center" href="http://www.tingclass.net/show-506-365316-1.html"></a>
    <hr>




</body>
</html>

 

  1. HTML头部元素：
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  2. 练习样式表：
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  3. 分别练习定义三类选择器：
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器     
      <!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <title>lh-three</title>
</head>
 <div  id="container" style="width:400px;margin:0px auto;" >
         <div id="header" style="background-color:lightyellow"><h2 align="center" style="margin-bottom: 0;">Login System</h2></div>
         <div id="content" style="background-color:lightgreen;height:150px;width:400px;float:left;text-align:center;line-height:40px;">
            <form action=""><p></p>
             Username:<input type="text" name="user"placeholder="请输入你的用户名"><br>
             Password:<input type="password" name="password"><br>
                    <input type="radio"name="role"value="stu">student
            <input type="radio"name="role"value="tch">teacher<br>
            <input type="button"value="log in">
        </form>

     <div id="footerone" style="background-color:#0080ff;clear:both;text-align:center;">版权  duym</div>

</body>
</html>

 

<div id="container" style="width: 400px">
    <div id="header" style="background-color: lightskyblue"><h2 align="center"
style="margin-bottom: 0;"></h2>相关栏目    related sections</div>

<div id="content" style="background-color: lightskyblue;height: 250px;width: 400px;float: left;">
<from>
    <select>
        <option>问答</option>
        <option>提问</option>
        <option>收藏</option>
    </select>


</from>
    <ul>
        <li>教师常用表格</li>
        <li>学生常用表格</li>
        <li>教学管理表格</li>
        <li>教学管理文件</li>
        <li>参考资料</li>

    </ul>
    <ol>
        <li>教师常用表格</li>
        <li>学生常用表格</li>
        <li>教学管理表格</li>
        <li>教学管理文件</li>
        <li>参考资料</li>
    </ol>

 <h1>剁手啦!!!</h1>
      <div  id="container" style="width:400px " >

       
        <p>双十一全部商品<span style="font-family: 'Consolas','Deja Vu Sans Mono','Bitstream Vera Sans Mono',monospace;font-size: 50px;background-color: aqua">50%OFF</span></p>
        <p>双十一全部商品50%OFF</p>
        <p class="textyellowgreen">双十一全部商品50%OFF</p>
          <p id="blue">双十一全部商品50%OFF</p>
<style type="text/css">
             h1{color:darkgrey}
        p{color:darkred;}
        .textyellowgreen{color:yellowgreen;}
        #blue{color:blue;}
        </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="c.css">
 <p>双十一全部商品50%OFF</p>
 <p class="textyellowgreen">双十一全部商品50%OFF</p> 
<p id="blue">双十一全部商品50%OFF</p> 
</body>
</html>

 

posted on 2017-10-17 21:11  076陈良舒  阅读(156)  评论(0)  编辑  收藏  举报