杨校老师课堂之WEB前端HTML2

简介: 杨校老师课堂之WEB前端HTML

杨校老师课堂之WEB前端HTML1:https://developer.aliyun.com/article/1542936

4 案例演示:

利用所学知识制作完成“时装商城”首页。

效果图:

4.1 步骤分析:

  1. 创建8行表格
  2. 实现第一行,嵌套一个一行三列表格。
  3. 实现第二行,实现导航,设置背景色。
  4. 放置一张图片
  5. 显示热门商品,创建一个三行七列的表格。对表格进行跨行,跨列的操作。
  6. 引入一张广告图片。
  7. 显示最新商品,创建一个三行七列的表格。对表格进行跨行,跨列的操作。
  8. 广告信息
  9. 链接版权信息。

4.2 准备材料

 

4.3 代码实现:

 <!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>网站首页</title>
 
    </head>
 
    <body>
 
        <table width="1400" border="0" align="center">
 
            <tr>
 
                <td>
 
                    <!-- LOGO部分 -->
 
                    <table width="100%">
 
                        <tr height="40">
 
                            <td>
 
                                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
 
                                <img src="img/logo.png"/>
 
                            </td>
 
                            <td>
 
                                <img src="img/header.png"/>
 
                            </td>
 
                            <td>
 
                                <a href="#">登录</a>
 
                                <a href="#">注册</a>
 
                                <a href="#">购物车</a>
 
                            </td>
 
                        </tr>
 
                    </table>
 
                </td>
 
            </tr>
 
                    <!--导航部分-->
 
            <tr height="30" bgcolor="#75AA24">
 
                <td>
 
                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
 
                    <a href="#"><font color="white">首页</font></a>
 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;
 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp; 
 
                    <a href="#"><font color="white">精品女装</font></a>&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;
 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;
 
                    <a href="#"><font color="white">酷帅男装</font></a>&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;      
 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;
 
                    <a href="#"><font color="white">时尚鞋靴</font></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
 
                    &nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;
 
                    <a href="#"><font color="white">真皮箱包</font></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
 
 
 
                </td>
 
            </tr>
 
            <!--轮播图-->
 
            <tr>
 
                <td>
 
                    <img src="products/1/banner1.jpg" width="100%"/>
 
                </td>
 
            </tr>
 
 
 
 
 
            <!--最新商品  展示模块-->
 
            <tr>
 
                <td>
 
                    <table width="100%" border="0">
 
                        <tr>
 
                            <td colspan="7"><font size="5"><b>最新商品</b></font>&nbsp;&nbsp;&nbsp;<img src="img/title2.jpg"></td>
 
                        </tr>
 
                        <tr>
 
                            <td rowspan="2"  width="200" height="500">
 
                                <img src="products/hao/big02.jpg" width="100%" height="100%"/>
 
                            </td>
 
                            <td colspan="3" width="600" height="250">
 
                                <img src="products/hao/middle02.jpg" width="100%" height="250"/>
 
                            </td>
 
 
 
                            <td width="200" align="center">
 
                                <img src="products/1/cs20001.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td width="200"  align="center">
 
                                <img src="products/1/cs20002.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td width="200"  align="center">
 
                                <img src="products/1/cs20003.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                        </tr>
 
                        <tr>
 
 
 
                            <td  align="center">
 
                                <img src="products/1/cs20004.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td  align="center">
 
                                <img src="products/1/cs20005.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td  align="center">
 
                            <img src="products/1/cs20006.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                <img src="products/1/cs20007.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                <img src="products/1/cs20008.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                <img src="products/1/cs20009.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                        </tr>
 
                    </table>
 
                </td>
 
            </tr>
 
                <!--广告-->
 
            <tr>
 
                <td>
 
                    <a href="#"><img src="products/hao/ad.jpg" width="100%"></a>
 
                </td>
 
            </tr>
 
                <!--掌柜推荐  展示模块-->
 
            <tr>
 
                <td>
 
                    <table width="100%" border="0">
 
                        <tr>
 
                            <td colspan="7"><font size="5"><b>掌柜推荐</b></font>&nbsp;&nbsp;&nbsp;<img src="img/title2.jpg"></td>
 
                        </tr>
 
                        <tr>
 
                            <td rowspan="2"  width="200" height="500">
 
                                <img src="products/hao/big02.jpg" width="100%" height="100%"/>
 
                            </td>
 
                            <td colspan="3" width="600" height="250">
 
                                <img src="products/hao/middle02.jpg" width="100%" height="250"/>
 
                            </td>
 
 
 
                            <td width="200" align="center">
 
                                <img src="products/1/cs10007.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td width="200"  align="center">
 
                                <img src="products/1/cs10008.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td width="200"  align="center">
 
                                <img src="products/1/cs10009.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                        </tr>
 
                        <tr>
 
 
 
                            <td  align="center">
 
                                    <img src="products/1/cs10001.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td  align="center">
 
                                <img src="products/1/cs10002.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td  align="center">
 
                                    <img src="products/1/cs10003.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                    <img src="products/1/cs10004.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                    <img src="products/1/cs10005.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">上衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                            <td align="center">
 
                                <img src="products/1/cs10006.jpg" width="130px" height="130px" /><br/>
 
                                <p><font color="gray">大衣</font></p>
 
                                <p><font color="red">$499</font></p>
 
                            </td>
 
                        </tr>
 
                    </table>
 
                </td>
 
            </tr>
 
            <!--尾部图片展示-->
 
            <tr>
 
                <td>
 
                    <img src="img/footer.jpg" width="100%"/>
 
                </td>
 
            </tr>
 
            <!--网页连接-->
 
            <tr>
 
                <td align="center">
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">关于我们</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">联系我们</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">招贤纳士</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">法律声明</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">友情链接</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">支付方式</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">配送方式</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">服务声明</a>
 
                    &nbsp;&nbsp;&nbsp;
 
                    <a href="">广告声明</a>
 
                    <br/>
 
 
 
                    <p>
 
                     Copyright © 2016-2019 杨校老师课堂 版权所有
 
                    </p>
 
                </td>
 
            </tr>
 
        </table>
 
    </body>
 
</html>
 

5.表单

  表单是什么?

   概念:用于采集用户输入的数据的。用于和服务器进行交互

   form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围

      属性:

                action:指定提交数据的URL

                method:指定提交方式[提交方式分类:一共7种,2种比较常用,除此7类外还有一个保留的关键字connect]

                              Get

                                    1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。

                                    2. 请求参数大小是有限制的。

                                    3. 不太安全。

                                 Post:


                                     1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)

                                     2. 请求参数的大小没有限制。

                                     3. 较为安全。

                                     4. 是上传组件所必须选择的方式

           表单项中的数据要想被提交:必须指定其name属性


    表单项标签:


              input:可以通过type属性值,改变元素展示的样式


                    type属性:


                                  text:文本输入框,默认值


                                        placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息


                                  password:密码输入框


                                   radio:单选框


                                           1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。

                                           2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值

                                           3. checked属性,可以指定默认值


                                   checkbox:复选框


                                           1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值

                                           2. checked属性,可以指定默认值


                                   file:文件选择框


                                   hidden:隐藏域,用于提交一些信息


                                   按钮


                                           submit:提交按钮。可以提交表单


                                           button:普通按钮


                                           image:图片提交按钮


                                                      src属性指定图片的路径    


                          label:指定输入项的文字描述信息


                                  label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点


                    select下拉列表:


                          子元素:option,指定列表项


                    textarea文本域:


                           cols:指定列数,每一行有多少个字符


                           rows:默认多少行        

二、CSS 页面美化及布局控制

 

1. 概念: Cascading Style Sheets 层叠样式表

                层叠:多个样式可以作用在同一个html的元素上,同时生效

2. 好处:

    1. 功能强大

   2. 将内容展示和样式控制分离

       1 降低耦合度。解耦

       2 让分工协作更容易

       3 提高开发效率


3. CSS的使用:CSS与html结合方式

   1. 内联样式

        1 在标签内使用style属性指定css代码

        2 如:<div style="color:red;">hello css</div>

   2. 内部样式

       1 在head标签内,定义style标签,style标签的标签体内容就是css代码

       2 如:

<style>
                div{
                    color:blue;
                }
        
 </style>
<body>
            <div>hello,I'm Css</div>
</body>

   3. 外部样式

       1. 定义css资源文件。

       2. 在head标签内,定义link标签,引入外部的资源文件

       * 如:

          style.css文件:

             

             div{
                    color:deepskyblue;
             }
            <link rel="stylesheet" href="css/style.css">
            <div>hello I'm css</div>
            <div>hello I'm css</div>

  * 1,2,3种方式 css作用范围越来越大

       * 1方式不常用,后期常用2,3

       * 3种格式可以写为:

       

            <style>
                @import "css/style.css";
            </style>

4. css语法:

   * 格式:

       选择器 {

           属性名1:属性值1;

           属性名2:属性值2;

           ...

       }

   * 选择器:筛选具有相似特征的元素

   * 注意:

       * 每一对属性需要使用;隔开,最后一对属性可以不加;


5. 选择器:筛选具有相似特征的元素

   * 分类:

       1. 基础选择器

           1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一

               * 语法:#id属性值{}

           2. 元素选择器:选择具有相同标签名称的元素

               * 语法: 标签名称{}

               * 注意:id选择器优先级高于元素选择器

           3. 类选择器:选择具有相同的class属性值的元素。

               * 语法:.class属性值{}

               * 注意:类选择器选择器优先级高于元素选择器

       2. 扩展选择器:

           1. 选择所有元素:

               * 语法: *{}

           2. 并集选择器:

               * 选择器1,选择器2{}

         

           3. 子选择器:筛选选择器1元素下的选择器2元素

               * 语法:  选择器1 选择器2{}

           4. 父选择器:筛选选择器2的父元素选择器1

               * 语法:  选择器1 > 选择器2{}


           5. 属性选择器:选择元素名称,属性名=属性值的元素

               * 语法:  元素名称[属性名="属性值"]{}


           6. 伪类选择器:选择一些元素具有的状态

               * 语法: 元素:状态{}

               * 如: <a>

                   * 状态:

                       * link:初始化的状态

                       * visited:被访问过的状态

                       * active:正在访问状态

                       * hover:鼠标悬浮状态

6. 属性

   1. 字体、文本

        font-size:字体大小

        color:文本颜色

        text-align:对其方式

        line-height:行高

   2. 背景

        background:

   3. 边框

        border:设置边框,符合属性

   4. 尺寸

        width:宽度

        height:高度

   5. 盒子模型:控制布局

        margin:外边距

        padding:内边距

            默认情况下内边距会影响整个盒子的大小

            box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小


        float:浮动

            left

            right


案例:注册页面

<!DOCTYPE html>
<html lang="en">
 
  <head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      
      body {
        background: url("image/bg.jpg") no-repeat center;
        padding-top: 25px;
      }
      
      .rg_layout {
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
      }
      
      .rg_left {
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
      }
      
      .rg_left> p:first-child {
        color: #FFD026;
        font-size: 20px;
      }
      
      .rg_left> p:last-child {
        color: #A6A6A6;
        font-size: 20px;
      }
      
      .rg_center {
        float: left;
        /* border: 1px solid red;*/
      }
      
      .rg_right {
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
      }
      
      .rg_right> p:first-child {
        font-size: 15px;
      }
      
      .rg_right p a {
        color: pink;
      }
      
      .td_left {
        width: 100px;
        text-align: right;
        height: 45px;
      }
      
      .td_right {
        padding-left: 50px;
      }
      
      #username,
      #password,
      #email,
      #name,
      #tel,
      #birthday,
      #checkcode {
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
      }
      
      #checkcode {
        width: 110px;
      }
      
      #img_check {
        height: 32px;
        vertical-align: middle;
      }
      
      #btn_sub {
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026;
      }
    </style>
 
  </head>
 
  <body>
 
    <div class="rg_layout">
      <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
 
      </div>
 
      <div class="rg_center">
        <div class="rg_form">
          <!--定义表单 form-->
          <form action="#" method="post">
            <table>
              <tr>
                <td class="td_left"><label for="username">用户名</label></td>
                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="password">密码</label></td>
                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="email">Email</label></td>
                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="name">姓名</label></td>
                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="tel">手机号</label></td>
                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label>性别</label></td>
                <td class="td_right">
                  <input type="radio" name="gender" value="male" checked="checked" > 男
                  <input type="radio" name="gender" value="female"> 女
                </td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="birthday">出生日期</label></td>
                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
              </tr>
 
              <tr>
                <td class="td_left"><label for="checkcode">验证码</label></td>
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                  <img id="img_check" src="image/validate_code.jpg">
                </td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
              </tr>
            </table>
 
          </form>
        </div>
 
      </div>
 
      <div class="rg_right">
        <p>已有账号?
          <a href="#">立即登录</a>
        </p>
      </div>
    </div>
  </body>
 
</html>

素材背景图片如下:

验证码图片如下:

最终效果图:


分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

目录
相关文章
|
6天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
11天前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
18 6
|
11天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
12 1
|
12天前
|
XML 前端开发 JavaScript
前端概论 web
前端概论 web
14 0
|
12天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
12天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
13天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
15天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
16 0
|
15天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
16天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记