day4,5-html

最新推荐文章于 2021-11-10 20:27:58 发布

Antja_fung

最新推荐文章于 2021-11-10 20:27:58 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/zqzb1111/article/details/70258527

版权

<!--html part-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="day4css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="card">
   <!-- < src="C:\Users\Administrator\Desktop\img.jpg" />-->
    <div id="name">
     <!--<img src="C:\Users\Administrator\Desktop\susie.jpg" />-->
        <h1>苏轼</h1>
        <p>唐朝著名诗人，又名苏东坡。</p>
     </div>
</div>

</body>
</html>

/*css part*/
*{
    padding: 0px;
    margin:0px;
}
#card
{
    width:500px;
    height:700px;
    border: solid 1px white;
    padding:20px;
    margin:20px;
    overflow:hidden;
    z-index:-1;
    background-image: url("img.jpg");
    background-repeat:no-repeat;
    position:absolute;
    left:500px;
    top:400px;

}
#name
{
    width:350px;
    height:600px;
    overflow:hidden;
    pardding:20px;
    position:relative;
    left:20px;
    top:70px;
   /* right:50px;
    buttom:0px;*/
    background-image: url("susie.jpg");
    background-repeat:no-repeat;
}
p
{
   /* font-size:100px;
    font-color:black;
    font-style:oblique;
    font-weight:bold;
    position:relative;
    top: 500px;
    left:0px;*/
    font-family: 楷体;
    text-align:left;
    position:relative;
    top:400px;
    font-size:30px;
    font-weight:bold;
}
h1
{
    font-family: 仿宋;
    position:relative;
    left:30px;
    top:50px;
}

过程中遇到问题，以后注意：
1.使用microsoft edge 不能正确显示盒子内容，用ie;
2.link

day5:

盒子使用宽度和高度时：又border&padding非0时，为保证浏览器兼容性：用！important (ie会忽略)，非ie会使用有important 的值。

fixed:随滑条保持与页面一样的位置。

加！DOCTYPE html

Antja_fung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day4,5-html

盒子使用宽度和高度时：又border&padding非0时，为保证浏览器兼容性：用！important (ie会忽略)，非ie会使用有important 的值。fixed:随滑条保持与页面一样的位置。加！DOCTYPE html
复制链接

扫一扫