2020-10-27-css语法选择器-京东项目

最新推荐文章于 2024-07-16 15:41:31 发布

AMr.Yang

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量176

点赞数

文章标签： html css javascript js vue

本文链接：https://blog.csdn.net/weixin_49736094/article/details/109318117

版权

day2-京东项目

css语法

"""
1.css写在那儿？
		内联样式表：css代码写在标签的style属性中
		内部样式表：将css代码写在style标签中
		外部样式 表：将css代码写在外部的css文件中，然后在HTML中通过link标签来导入
		
2.css语法
	选择器{属性名1：属性值1,；属性名2：属性值2....}
	选择器 - 选中当前需要添加样式的标签（在内联就用不着了）
	属性  - 属性名有哪些是固定的（属性值如果是数字大小必须加单位：px（一般都是像素））
			多个属性之前必须用;隔开

3.选择器
	id选择器  - 在id属性值前面加#作为一个选择器，选中id属性是指定的标签
				例如： #user{} - 选中id属性值是user的标签（id属性是唯一的）
	类选择器  - 在class属性前加.作为一个选择器，选中class属性是指定的标签
				例如：.c1 - 选中class属性是c1的所有标签
	元素选择器 - 直接将标签名作为选择器，选中所有指定的标签
				p{} - 选中当前页面所有的p标签
	群组选择器  - 将多个选择器用逗号隔开作为一个选择器，选中每个选择器选中的标签
				#p1,.c1{}  - 选中id是p1和class是c1的标签
	后代选择器 - 多个选择器用空格隔开
				div p{} - 选择直接和间接包含在div标签中的p标签
				div .c1 p{}  - 选择直接和间接包含在div标签中的class为c1标签中的 p标签
	子代选择器  - 将多个选择器用> 隔开
				div>p{}  - 选中直接包含在div标签中p标签
	
				
"""

index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <!-- 设置网页标题 -->
		<title>京东-欢迎登录</title>
        
        <!-- 设置网页图标
         link标签 - 导入一个外部文件
         rel属性  -  被导入文件的作用(stylesheet-样式表; icon-图标)
         type属性 -  被导入的文件类型(text/css-后缀是css的文本文件; image/ico-后缀是ico的图片)
         href属性 - 需要导入的文件路径
        -->
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
        
        <!-- 导入外部样式 -->
        <link rel="stylesheet" type="text/css" href="./css/login.css"/>
        
        <!-- 导入js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        
        
	</head>
	<body>
        <!-- ===============顶部盒子=============== -->
        <div id="top-box">
            
            <div id="logo">
                <div>
                    <a href="">
                        <img src="img/logo-201305-b.png" >
                    </a>
                    <img src="img/l-icon.png" >
                </div>
                
                <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">登录页面，调查问卷</a>
            </div>
            
            
            <div id="privacy">
                <p><img src="img/icon-tips.png" alt="">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
            </div>
        </div>
        
        <!-- ===============中间盒子=============== -->
        <div id="app1">
            <div id="" v-for="item in message">
                <img v-bind:src="item.image_url" >
                <p>{{item.title}}</p>
            </div>  
        </div>
        
        <!-- ===============底部盒子=============== -->
        <div id="bottom-box"></div>
	</body>
    <script type="text/javascript" src="js/login.js"></script>
</html>

js

$.ajax({
    url:"https://www.toutiao.com/api/search/content/?aid=24&app_name=web_search&offset=0&format=json&keyword=%E8%A1%97%E6%8B%8D&autoload=true&count=20&en_qc=1&cur_tab=1&from=search_tab&pd=synthesis&timestamp=1603786957270&_signature=_02B4Z6wo00f01H6zkggAAIBAvfncL7R8SOh-tpaAAEA.kfTrfaY-2-cu10VTTIrUd4PSR9.aVhKo31fXWLPCSAe-E5bjlE761eqLHbW-nj-9KtkQrBNZzlYlM5m8vroi.Df-7B6SvcCwaEeFc3",
    success:function(result){
        // showData(result['data'])
        console.log(result)
        data = [
            {'image_url':'https://p3.pstatp.com/medium/6cb000fd8de5eec5814', 'title': '图片1'},
            {'image_url': 'https://gw.alicdn.com/tps/i1/58954869/O1CN011iTQBQ1lq34CkXmFY_!!58954869.jpg_Q75.jpg_.webp', title:'图片2'},
            {'image_url':'https://gw.alicdn.com/tps/i4/1653324536/O1CN019a5Rja1jNXAcpzb2f_!!1653324536.jpg_Q75.jpg_.webp', title:'图片3'}
        ]
        app.message = data
    }
});

app = new Vue({
    el: '#app1',
    data:{
        message: []
    }
})



// jQuery
function showData(data){
    data.forEach(function(item){
        // console.log(item)
        div = $('<div></div>')
        
        image = $(`<img src="${item['image_url']}">`)
        div.append(image)
        
        if(item['emphasized']){
            title = item['emphasized']['title']
            p = $(`<p>${title}</p>`)
            div.append(p)
        }
        
        $('#middle-box').append(div)
    })
}

*{
    margin: 0;
    padding: 0;
}

/* ====================顶部盒子==================== */
#top-box{
    background-color: hotpink;
    height: 120px;
}

#logo{
    height: 85px;
    background-color: white;
    position: relative;
}

#logo>div{
    position: absolute;
    left: 20px;
    
    top: 50%;
    margin-top: -30px;
}
#logo>div>img{
    margin-left: 20px;
}

/* 调查问卷 */
#logo>a{
    position: absolute;
    right: 20px;
    bottom: 10px;
    
    color: rgb(153,153,153);
    font-size: 12px;
    
    /* 去掉下划线 */
    text-decoration: none;
    
    /* 设置背景图 
    background(url(图片地址) 是否平铺 x坐标 y坐标 背景颜色)
    */
    background: url(../img/q-icon.png) no-repeat 0 center;
    
    padding-left: 22px;
}

#logo>a:hover{
    color: rgb(230,87,91);
    text-decoration: underline;
}



#privacy{
    height: 35px;
    background-color: rgb(255, 248, 241);
}

#privacy>p{
    color: rgb(175,175,175);
    font-size: 11px;
    
    text-align: center;
    
    height: 100%;
    line-height: 35px;
}

#privacy>p>img{
    vertical-align: middle;
    margin-right: 4px;
}

#privacy>p>a{
    text-decoration: none;
    color: rgb(51,51,51);
}
#privacy>p>a:hover{
    text-decoration: underline;
}





/* ====================中间盒子==================== */
#app1{
    background-color: #9ACD32;
    height: 475px;
}

s



/* ====================底部盒子==================== */
#bottom-box{
    background-color: aquamarine;
    height: 105px;
}

AMr.Yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020-10-27-css语法选择器-京东项目

day2-京东项目css语法"""1.css写在那儿？内联样式表：css代码写在标签的style属性中内部样式表：将css代码写在style标签中外部样式表：将css代码写在外部的css文件中，然后在HTML中通过link标签来导入 2.css语法选择器{属性名1：属性值1,；属性名2：属性值2....} 选择器 - 选中当前需要添加样式的标签（在内联就用不着了）属性 - 属性名有哪些是固定的（属性值如果是数字大小必须加单位：px（一般都是像素））多个属性
复制链接

扫一扫