Web基础之HTML + CSS

终于把韩顺平老师的《轻松搞定网页设计html+css+JavaScript》看完了,之前做毕设项目的时候就被前台的东西弄的头疼,学完这个系列感觉稍有所成。顺便推荐一下,韩顺平老师确实不错,他讲的Linux、Java、SSH都相当值得一看。学完东西要总结总结,下面结合平时做的demo做些笔记。

  • 用MyEclipse进行开发,可以用alt + / 进行提示;
  • 多查w3school.htm帮助文档,比如某个标签有什么属性、方法等;
  • 基本html元素:

table:

 <table bordercolor="2177B7" width=200px border=1 cellspacing=0 align="center" cellpadding="5px">
<tr align="center"><td colspan="3">1</td></tr>
<tr><td rowspan="2">2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
<tr><td rowspan="2">7</td><td>8</td><td>9</td></tr>
<tr><td>10</td><td>11</td></tr>
 </table>


form:

<form action="" method="post">
名字:<input type="text" name="name"/><br>
密码:<input type="password" name="pwd"/><br>
<input type="checkbox" name="fav"/>西瓜<br>
<input type="checkbox" name="fav"/>菠萝<br>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女<br>
<input type="hidden" value="***" name=""/>    // hidden 输入框可以用来传值,不影响页面布局
<select name="bir">
<option value="">--请选择--</option>
<option value="1">Beijing</option>
<option value="2">Shanghai</option>
</select><br>
<textarea name="letter"></textarea><br>
<input type="file" name="myfile"/><br>
<input type="image" src="img/ok.gif">
<input type="image" src="img/no.gif">
  </form>


framset:

<frameset cols="%50,%50">
<frame src="index.html">
<frame src="a.html">
</frameset>

  • Demo 1: 结合ul 和 li排列图像:

  <linkhref="css/box2.css" type="text/css"rel="stylesheet">
     <body>
   <div class="container">
    <ul class="faceul">
       <li><imgsrc="images/1.jpg"/><br><a href="#">卡卡西</a></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
       <li><imgsrc="images/1.jpg"/></li>
    </ul>
   </div>
 </body>

box2.css:

.container{
   width:800px;
   height:800px;
   border:1px solid red;
   margin:0px auto;
}
.faceul{
   width:760px;
   height:480px;
   border:1px solid green;
   list-style-type: none;
   margin: 0px 0px;
}
.faceul li{
  float:left;
  margin-right: 10px;
  margin-top: 10px;
}
.faceul img{
   width:80px;
   height:82px;
}
.faceul a{
   font-size: 12pt;
   margin: 5px 10px;
   text-decoration: none;
   color:green;
   font-style: italic;
}
a:hover{
   color:red;
}

  •  Demo 2:id选择器和类选择器同时修饰时,id选择器为主,span默认显示是inline(不换行),div默认显示block(全部占据所在行),但是可以改变display属性来更改。

 <link rel="stylesheet" type="text/css"href="css/homework.css">

 <body>

    <span class="style1">梁山英雄排行榜</span><br><br>

    <span class="style2"id="head">宋江</span><br><br>

    <span class="style2">卢员外</span><br><br>

    <span class="style2"id="middle">吴用</span><br><br>

    <span class="style2">豹子头</span><br><br>

    <span class="style2">大刀关胜</span><br><br>

    <a href="#">Hello,eveyone1</a><br>

    <a href="#">Hello,eveyone2</a><br>

    <a href="#">Hello,eveyone3</a><br>

    <a href="#">Hello,eveyone4</a><br>

    <span class="s1">这是span block</span>

    <div class="s2">这是div inline</div>

 </body>

homework.css:

.style1{

   font-size:24px;

   color:yellow;

}

.style2{

   color:black;

   font-size:15px;

   background-color:gray;

}

#head{

   color:red;

   font-style:italic;  

}

#middle{

   font-style:italic;

   text-decoration:underline;

}

a:link{

   color:red;

   font-size:24px;

}

a:hover{

   text-decoration:underline;

   color:green;

   font-size:40px;

}

.s1{

   background-color:pink;

   display:block;

}

.s2{

   background-color:gray;

   display:inline;

}

  • Demo 3:仿优酷页面布局:

<link rel="stylesheet"type="text/css" href="css/homework2.css">

  <body>

  <divclass="container">

  <div class="row">

      <span class="bold">优酷牛人</span>

      <a href="#">更多牛人</a><br>

      <ul class="faceul">

         <li><imgsrc="images/2.jpg"><br><span>Michael</span></li>    

         <li><imgsrc="images/3.jpg"><br><span>小演框</span></li> 

         <li><imgsrc="images/5.jpg"><br><span>道听途说</span></li>         

      </ul>

  </div>

      <div class="row">

      <span class="bold">明星空间</span>

      <a href="#">更多空间</a><br>

      <ul class="faceul">

         <li><imgsrc="images/2.jpg"><br><span>爱心月</span></li> 

         <li><imgsrc="images/3.jpg"><br><span>城堡</span></li>    

         <li><imgsrc="images/5.jpg"><br><span>卢正雨</span></li>        

      </ul>

  </div>

      <div class="row">

      <span class="bold">优酷公益</span>

      <a href="#">更多公益</a><br>

      <ul class="faceul">

         <li><imgsrc="images/2.jpg"><br><span>扶贫基金会</span></li> 

         <li><imgsrc="images/3.jpg"><br><span>李彬彬</span></li> 

         <li><imgsrc="images/5.jpg"><br><span>生态中国</span></li>         

      </ul>

  </div>

  </div>

  </body>

homework2.css:

.container{

   width:500px;

   height:800px;

   border:1pxsolid red;

   margin:0pxauto;

}

.row{

   width:450px;

   height:140px;

   /*

   border:1pxsolid blue;

   */

}

.bold{

   font-size:18px;

   color:black;

   font-weight:bold;

   margin-right:300px;

}

a:link{

   text-decoration:none;

   color:green;

}

.faceul{

   list-style-type:none;

}

.faceul li{

   float:left;

   margin-left:20px;

}

.faceul img{

   width:100px;

}

.faceul span{

   color:blue;

   font-size:12pt;

}

  • Demo 4:仿搜狐页面布局:

<link rel="stylesheet"type="text/css" href="css/sohu.css">

  <body>

      <div class="container">

         <div class="head">

            <div class="login">登录表单</div>

            <div class="index">设为主页</div>

            <div class="link">设置超链接</div>

         </div>

         <div class="navi">

            <imgsrc="images/1.jpg"/>

            <div class="navigate">导航栏</div>

         </div>

         <div class="body">

            <divclass="inroll"></div>

            <divclass="adv1"></div>

            <divclass="adv2"></div>

            <divclass="adv3"></div>

         </div>

      </div>

  </body>

sohu.css:

.container{

   width:900px;

   margin:0pxauto;

}

.head{

   background-color:#F3FFFA;

   height:40px;

}

.navi{

   height:150px;

   margin:10px 0;

}

.body{

   height:300px;

}

.login{

   float:left;

}

.index{

   margin-left:400px;

   float:left;

}

.link{

   float:right;

}

.navi img{

   width:150px;

   float:left;

}

.navigate{

   height:150px;

   width:740px;

   margin-left:160px;

   background-color:#8EF68A;

}

.inroll{

   float:left;

   width:150px;

   height:300px;

   background-color:green;

}

.adv1{

   float:left;

   width:300px;

   height:300px;

   background-color:yellow;

   margin-left:10px;

}

.adv2{

   float:left;

   width:200px;

   height:300px;

   background-color:pink;

   margin-left:10px;

}

.adv3{

   float:left;

   width:220px;

   height:300px;

   background-color:blue;

   margin-left:10px;

}


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

zhengkang504

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值