html部分---格式与布局；

2023-08-01 11:19:40

一：position：fixed（相对于浏览器窗口来对元素进行定位）

<style type="text/css">
.aa
{
position:fixed;
left:5px;
top:5px;
}
.bb
{
position:fixed;
top:5px;
left:30px;
}
</style>
</head>
<body>

<p class="aa">文字</p>
<p class="bb">文字</p>

二，position absolute 绝对定位

<style>

.aa
{
position:absolute;
left:50px;
top:80px
}
</style>

</head>
<body>
<h2 class="aa">大学生创业</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 50px，距离页面顶部 80px。</p>

</body>

三 position relactive 相对定位

<style>
.aa
{
position:relative;
left:-20px
}
.bb
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<h2 class="aa">相对于其正常位置向左移动</h2>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<h2 class="bb">相对于其正常位置向右移动</h2>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

四分层（z-index）

<style>
.aa
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="aa" src="../新建文件夹/psb.jpg">
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

<style>
.aa
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="aa" src="QQ截图20161031090629.png"/>
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>

五 float 流

<style>
.aa{
    float:left;}
</style>
</head>

<body>
<div class="aa">1</div>
<div class="aa">2</div>
<div class="aa">3</div>

前

后

float的例题

<style>
#menu{ width:900px; height:50px; float:left}
        .list{ float:left; width:100px; height:50px; text-align:center; vertical-align:middle; line-height:50px; background-color:#3FC; margin-left:10px}
</style>
</head>

<body>
<div id="menu">
          <div class="list">首页</div>
        <div class="list">作业管理</div>
        <div class="list">作业检查</div>
        <div class="list">作业查看</div>
        <div class="list">发布作业</div>
      </div>

<div style="clear:both"></div> 清流，防止使用流时出现错误

display 控制显示样式（显示与隐藏）

display:none  表示不显示；

display:block 显示；

#s1{ width:100px; height:100px; background-color:#F00; display:inline-block}

 <span id="s1">测试文字</span>  <span>和<a>标签不能通过width height进行调整大小，但display:inline-block能控制它的大小；

visibility 控制显示与隐藏

#d5{ width:100px; height:100px; background-color:#666; visibility:hidden}

<div id="d5"></div>

visibility:hidden表示隐藏

overflow 超出部分控制；

超出部分隐藏；

<style>
#d7{ width:100px; height:100px; overflow:hidden}
</style>
</head>

<body>
<div id="d7">蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时</div>

透明处理

<style>
#d8{ width:200px; height:200px; background-color:black;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}
</style>
</head>

<body>
<div id="d8"></div>

圆角处理border-radius:20px;--20表示半径

#d1{width:100px; height:100px; background-color:#000; display:block;border-radius:20px;}

<div id="d1"></div><br />

阴影处理

#d2{width:100px; height:100px; background-color:#666; display:block;border-radius:20px;box-shadow:0 0 50px white;}

<div id="d2"></div>

鼠标变小手 cursor:pointe；

transform:rotate(45deg)；旋转45度

 <div style=" width:50px; height:50px; border-bottom:2px solid #006; border-left:2px solid #006;transform:rotate(45deg)"></div>

布局出该效果

提示：使用DIV的border样式，调整边框粗细出现该效果，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。

<div style=" width:200px; height:200px; border-top:3px solid #333">

<div style=" margin-top:10px; border-left:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid transparent; border-top:100px solid #309"></div>

</div>

给title加图片

<title>无标题文档</title>

鼠标放上：

要求：鼠标放上的过程中文字位置不移动。

提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39

<style>

*{ font-style:微软雅黑; color:#333;}

#d1 { width:500px; height:52px; font-style:微软雅黑; color:#333; border:1px solid #e9e9e9; }

#d1 div{ width:100px; height:50px;float:left; font-weight:bold;text-align:center; vertical-align:middle; line-height:50px; border-top:2px solid #FFF}

#d1 div:hover{ background-color:#b3b6bb;  border-top-color:#F00; color:#fff;}

</style>

</head>

<body>

<div id="d1">

 <div>春节</div>

 <div>元宵节</div>

 <div>端午节</div>

 <div>中秋节</div>

 <div>国庆节</div>

</div>

添加背景音乐

码农公寓

相关文章