<!-- 内部样式 -->
<style type="text/css">
/* 这儿写的css代码 */
#box1{
/* 设置文字颜色 */
color: green;
/* 设置背景颜色 */
background-color: yellow;
/* 设置字体大小 */
font-size: 30px;
/* 设置字体宽度(粗细) */
font-weight: 100;
/* 设置宽度和高度 */
width: 120px;
height: 100px;
}
.c1{
color: deeppink;
/* border: 边框样式 边框颜色 边框的宽度
solid - 实线
dotted - 点划线
dashed - 虚线
double - 双实线
*/
/* 四个边一起设置 */
/* border: solid purple 5px; */
/* 四个边单独设置 */
border-top: solid purple 5px;
border-left: dotted purple 3px;
}
.c2{
background-color: yellowgreen;
}
p{
/*
添加文字装饰:
underline - 下划线
line-through - 删除线
none - 取消装饰
*/
text-decoration: line-through;
}
a{
text-decoration: none;
}
.c1,#box1{
background-color: pink;
/* 同时设置四个角的圆角弧度 */
/* border-radius: 20px; */
/* 分别设置四个角的圆角弧度 */
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
div p{
text-align: center;
}
div>p{
background-color: darkorange;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="./css/css基础语法.css"/>
</head>
<body>
<!-- 内联样式 -->
<p class="c2" style="color: red;">我是段落1</p>
<div id="box1">我是div1</div>
<img src="img/logo-201305-b.png" >
<a href="" class="c1 c2">我是超链接1</a>
<p class="c1">我是段落2</p>
<input type="text" name="" id="" value="" />
<div id="">
<a href="">我是超链接2</a>
<p>我是段落3</p>
<span class="c1">我是span1</span>
<div id="">
<span>
<p>我是段落4</p>
</span>
</div>
</div>
</body>
<!-- 设置网页图标
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>