2021年9月6日

今天的内容

1.css综合案例，带着你们布一个页面回顾css属性

2.javascript入门

3.下午两点高令娜老师讲就业课（一定要好好听） 4.讲完以后，咱们使用html css布一个京东页面！！！目的就是为了让你们去熟练css的属性

1.对ul标签进行浮动的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
                color:red;
                font-size: 30px;
            }
            
            li{
                float: left;
                padding-left: 30px;
            }
            div {
                clear:both;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <!-- 无序列表 -->
            <ul type="none">
                <li><a href="#">秒杀</a></li>
                <li><a href="#">优惠卷</a></li>
                <li><a href="#">plu会员</a></li>
                <li><a href="#">品牌闪购</a></li>
                
                
            </ul>
            <!-- 这个div必须放在下一行，不能在右边放了，要另起一行！！！ -->
            <div>今天是个好日子，不热不冷</div>
        </div>
    </body>
</html>
​

2.综合案例（CSS）

c10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
                color: black;
            }
            .a1 {
                color: red;
            }
            #serchText{
                height: 25px;
                width: 500px;
            }
            #serchbtn{
                height: 30px;
            }
            #div3 {
                clear: both;
            }
        </style>
    </head>
    <body>
        <!-- 顶部 -->
        <div id="top">
            <div style="background-color: #DCDCDC;height: 35px;border-radius: 10px;line-height: 35px;">
                <div style="text-indent: 2em;float: left;">
                    <a href="#" class="a1">亲，请登录</a>&nbsp;
                    <a href="#">免费注册</a>&nbsp;
                    <a href="#">手机逛淘宝</a>
                </div>
                <div style="float: right;margin-right: 20px;">
                    <a href="#" class="a1">淘宝首页</a>
                    <a href="#">我的淘宝</a>
                    <a href="#">购物车</a>
                    <a href="#">足疗店</a>
                    <a href="#">收藏夹</a>
                    
                    <a href="#">商品分类</a>
                    <a href="#">卖家中心</a>
                    <a href="#">联系客户</a>
                </div>
            </div>
            <div style="padding-top: 30px;">
                <!-- 图标 -->
                <div style="float: left;">
                    <img src="img/logo.png"/>
                </div>
                <!-- 搜索框 -->
                <div style="float: left; padding-left: 200px;">
                    <input type="text" name="keybord" id="serchText"/>
                    <input type="submit" value="搜索" id="serchbtn"/>
                    <div style="padding-top: 10px;">客厅灯&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;冲锋衣&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    沙发垫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    电脑桌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    鞋柜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    电视机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        
</div>
</div>
</div>
<div id="div3" style="height: 35px;background-color:#DCDCDC ;border-radius: 10px;text-indent: 2em;line-height: 35px;">
    您是不是要找:客厅灯|冲锋衣|床垫|鞋柜

</div>
<div style="border: solid 1px #aaa;border-radius: 10px;height: 40px;line-height: 40px;margin-top: 20px;">
<!-- 价格 -->
<div style="float: left;margin-left: 35px;">
    价格:<input type="text"/>--<input type="text"/>
</div>
<!-- 是否包邮 -->
<div style="float: right;margin-right: 35px;">
<input type="checkbox"/>包邮
<input type="checkbox"/>不包邮
<input type="checkbox"/>包一半邮
</div>
</div>
<!-- main的主页面，就是那些图片 -->
<div id="main" style="margin: auto;padding-left: 40px;">
<div style="float: left;margin-right: 50px;">
<img src="img/002.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/003.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/003.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/004.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/005.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/006.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/007.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/008.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/009.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
<div style="float: left;margin-right: 30px;">
<img src="img/010.png"/>
<div style="margin-left: 60px;">
<div style="color: tomato;">40￥包邮</div>
<div>世界上最好的商品</div>
<div style="color: #aaa;">浪漫服饰专营店</div>
<div style="margin-left: 80px;color: #aaa;">如实描述4.4</div>
</div>
</div>
</div>
</body>
</html>
​

今天下午就业老师讲完课，班主任开完班会以后，一定把京东页面布一下，你只有自己写一遍以后才能记住那些属性，如果单纯去记的话，是记不住的！！！

3.JavaScript

一个页面由html css js 组成的！！！

js:相当重要！！！。如果想要学号前端，那些html,css根本没有技术含量的

但是js相当有技术含量！！！，但是咱们主要是做后端的，所以说学js学的比较少！！！可以让你们秀儿出来页面的那种。所以以后不断的学习js，我个人特别喜欢js。因为js是一门独立的语言有自己的语法格式。Js这门语言在语言排名当中没有出过前五名

http://github.com/ 这个需要注册，咱们会讲Git，版本控制，开发必用！！！服务器在国外打开比较慢

JavaScript:简称js。实现网页的动态效果的

JavaSCript和java有什么关系呢？没有关系，借助了java的名气命名。就好比老婆和老婆饼

好比雷锋和雷峰塔没有任何关系的

有自己的独立的语法格式

css修饰html标签的

js也是修饰html标签的，可以标签动起来的一门语言，所以在写代码的时候还是先写html标签

3.1Js的三种引入方式

类比css有三种引入方式，这个js也有三种引入方式。因为你也是修饰html标签

1.相当于行内

2.相当于内联

3.相当于外联

3.1.1js的初始
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 第二种写法，类似css内联
         放在任意位置都可以的，并不只是放在head头标签中
         可以放在这个网页的任意一个位置
         写一个script标签，然后再script标签中写js的语法格式就可以了
         -->
        <script>
            var num = 123//int num= 123;不用指定数据类型，自动识别
            //控制台打印一些，java  System.out.println()
            //js控制台打印
            console.log(num);
            
        </script>
        <!-- 第三种写法类似以咱们css的外联   link  href
        script  src属性在当前页面引进外部的css文件
        -->
        <script src="test.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <!-- 先看第一种写法
         button  按钮  有一个属性叫onclick
         这个onclick是当你点击这个这个按钮的时候执行这个onclick
         这个onclick属性值必须写js的代码
         alert() 是js代码。他是js封装好的一个函数
         这个函数的功能是 弹框效果！！！
         -->
        <button onclick="alert('京贺,征婚')">点一下</button>
        
    </body>
</html>
​
3.1.2js输出

  • 使用 window.alert() 写入警告框

  • 使用 document.write() 写入 HTML 输出

  • 使用 console.log() 写入浏览器控制台

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
    </body>
    <script>
        // window是js封装好的一个的对象，默认就是本窗体在调用啊！！
        //window.alert("使用window调用一个叫alert函数");
        //document是就是封装好的一个对象，当前文档流对象，当成body的对象
        
        //document.write("我是一个页面");
        console.log("呵呵哒")
    </script>
</html>
​
3.1.3js语句

类似于咱们java中声明变量如何声明

int a = 12;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        // 如何声明一个js变量
        var a = 20;
        var b = 30;
        var c = 40;
        console.log(a, b, c)
        var e,d,f;
        e = 20;
        d = 30
        f = 40
        console.log(e,d,f );
        //这个分号带不带都行，但是如果写在一行了，必须带分号
        var name="狗蛋";var age = 12;console.log(name, age)
        
    </script>
</html>
​
3.2.4JS数据类型

java有八大基本数据卡类型

js有几种？拭目以待。可以看官方手册！！！



posted @ 2021-09-07 16:47  张三疯321  阅读(145)  评论(0)    收藏  举报