html day2 css

其他 2018-10-09 06:37:50 阅读次数: 0

今日目标

使用CSS完成网站首页的优化

使用CSS完成网站注册页面的优化

使用JS完成简单的数据校验

使用JS完成图片轮播效果

教学目标：

  • 了解CSS的概念
  • 了解CSS的引入方式
  • 了解CSS的基本用法和常用的选择器
  • 了解CSS的盒子模型，悬浮和定位
  • 了解JS的概念
  • 掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互

使用CSS完成网站首页的优化

需求分析:

​ 由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2.  采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

技术分析

HTML的块标签:

​ 1、div标签: 默认占一行,自动换行

​ 2、span标签: 内容显示在同一行

  • CSS概述:

​ Cascading Style Sheets : 层叠样式表

​ 红砖, 抹了一层水泥, 白灰

  • 主要用作用:

​ 用来美化我们的HTML页面的

​ HTML 决定网页的骨架 ,
CSS 化妆

​ 将页面的HTML和美化进行分离

  • CSS的简单语法:

​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

ID选择器:

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器:

以 . 开头 
.类的名称{
   属性名称:属性的值;
    属性名称:属性的值;
}

CSS的引入方式:

  • 外部样式: 通过link标签引入一个外部的css文件
    • rel =”stylesheet” href=css文件
  • ​ 内部样式: 直接在style标签内编写CSS代码
  • ​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
    style = “color: green;”

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
流式布局

            float属性:
                left
                right

            clear属性: 清除浮动
                both : 两边都不允许浮动
                left: 左边不允许浮动
                right : 右边不允许浮动
            流式布局

步骤分析:

  1. 创一个最外层div
  2. 第一部份: LOGO部分: 嵌套三个div
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分:
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

            .logo{
                float: left;
                width: 33%;
                /*border-width: 1px;
                border-style: solid;
                border-color: red;*/
                height: 60px;
                line-height: 60px;
        /*      border: 1px solid red;*/
            }


            .amenu{
                color: white;
                text-decoration: none;
                height: 50px;
                line-height: 50px;
            }

            .product{
                float: left; text-align: center; width: 16%; height: 240px;
            }

        </style>
    </head>
    <body>
        <!--
            1. 创一个最外层div
            2. 第一部份: LOGO部分: 嵌套三个div
            3. 第二部分: 导航栏部分 : 放置5个超链接
            4. 第三部分: 轮播图 
            5. 第四部分: 
            6. 第五部分: 直接放一张图片
            7. 第六部分: 抄第四部分的
            8. 第七部分: 放置一张图片
            9. 第八部分: 放一堆超链接
        -->
        <div>
            <!--2. 第一部份: LOGO部分: 嵌套三个div-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="logo">
                    <img src="../img/header.png"/>
                </div>
                <div class="logo">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>


            <!--清除浮动-->
            <div style="clear: both;"></div>


            <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首页</a>
                <a href="#" class="amenu">手机数码</a>
                <a href="#" class="amenu">电脑办公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香烟酒水</a>
            </div>


            <!--4. 第三部分: 轮播图--> 
            <div>
                <img src="../img/1.jpg" width="100%"/>
            </div>
            <!--5. 第四部分:--> 
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>

                <!--左侧广告图-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>

                </div>
            </div>

            <!--6. 第五部分: 直接放一张图片-->
            <div>
                <img src="../products/hao/ad.jpg" width="100%"/>
            </div>
            <!--7. 第六部分: 抄第四部分的-->
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>

                <!--左侧广告图-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>

                </div>
            </div>

            <!--8. 第七部分: 放置一张图片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第八部分: 放一堆超链接-->
            <div style="text-align: center;">

                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>

                    <br />

                    Copyright © 2005-2016 传智商城 版权所有
            </div>
        </div>
    </body>
</html>

扩展:

  • CSS的优先级
 按照选择器搜索精确度来编写:         
 行内样式 > ID选择器 > 类选择器  > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

CSS: 层叠样式表

主要作用:

1. 美化页面
2. 将页面美化和HTML代码进行分离,提高代码的服用型

  • 选择器:

    • 元素选择器: 标签的名称{}
    • 类选择器: 以. 开头 .类的名称
    • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

  • CSS浮动:

    • float : left, right 不再占有正常文档流中的空间 , 流式布局

    • clear : both left right

      ​

    • CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 属性选择器:

    a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

  • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

  • 子元素选择器: 父选择器 > 儿子选择器

  • 伪类选择器: 通常都是用在A标签上

    ​

    ​

使用DIV+CSS完成注册页面的优化

需求分析

由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化

总共是5部分内容

技术分析

CSS的盒子模型: 万物皆盒子

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置

步骤分析:

  1. 总共是5部分
  2. 第一部分是LOGO部分
  3. 第二部分是导航菜单
  4. 第三部分是注册部分
  5. 第四部分是FOOTER图片
  6. 第五部分是一堆超链接

代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    </head>
    <body>
        <!--
            1. 总共是5部分
            2. 第一部分是LOGO部分
            3. 第二部分是导航菜单
            4. 第三部分是注册部分
            5. 第四部分是FOOTER图片
            6. 第五部分是一堆超链接
        -->
        <div>

            <!--2. 第一部分是LOGO部分-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../img/header.png" />
                </div>
                <div class="logo">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <!--清除浮动-->
            <div style="clear: both;"></div>
            <!--3. 第二部分是导航菜单-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首页</a>
                <a href="#" class="amenu">手机数码</a>
                <a href="#" class="amenu">电脑办公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香烟酒水</a>
            </div>
            <!--4. 第三部分是注册部分-->
            <div style="background: url(../image/regist_bg.jpg);height: 500px;">

                <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
                    <table width="60%" align="center">
                        <tr>
                            <td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>

                        </tr>
                        <tr>
                            <td>用户名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>确认密码:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email"/></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>性别:</td>
                            <td><input type="radio" name="sex"/> 男
                            <input type="radio" name="sex"/> 女
                            <input type="radio" name="sex"/> 妖
                            </td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date"/></td>
                        </tr>
                        <tr>
                            <td>验证码:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="注册"/></td>
                        </tr>
                    </table>
                </div>

            </div>

            <!--5. 第四部分是FOOTER图片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第四部分: 放一堆超链接-->
            <div style="text-align: center;">

                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>

                    <br />

                    Copyright © 2005-2016 传智商城 版权所有
            </div>

        </div>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/amy260231120/article/details/82384657
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022