当前位置：首页 > news >正文

蓝色系网站首页百度seo关键词排名技术

news 2025/7/15 5:33:51

蓝色系网站首页,百度seo关键词排名技术,可以做fiting网站,计算机考试模拟网站怎么做Display显示与Visibility可见性 display属性设置一个元素应如何显示 visibility属性指定一个元素应可见还是隐藏。隐藏元素-display：none或visibility：hidden 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性…

Display显示与Visibility可见性

display属性设置一个元素应如何显示
visibility属性指定一个元素应可见还是隐藏。
隐藏元素-display：none或visibility：hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

<style>
h1.hidden {visibility:hidden;}
</style>
</head><body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>

效果图显示如下：
在这里插入图片描述

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<style>
h1.hidden {display:none;}
</style>
</head>
<body><h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>

效果图如下：
在这里插入图片描述

CSS Display - 块和内联元素

在这里插入图片描述

把列表项转化为内联元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接列表水平展示</title> 
<style>
li{display:inline;}
</style>
</head>
<body><p>链接列表水平显示：</p><ul>
<li><a href="https://www.runoob.com/html/html-tutorial.html" target="_blank">HTML</a></li>
<li><a href="https://www.runoob.com/css/css-tutorial.html" target="_blank">CSS</a></li>
<li><a href="https://www.runoob.com/js/js-tutorial.html" target="_blank">JavaScript</a></li>
<li><a href="https://www.runoob.com/css3/css3-tutorial.html" target="_blank">CSS3</a></li>
</ul></body>
</html>

把span元素作为块元素：

<style>
span
{display:block;
}
</style>
</head>
<body><h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

如何显示一个元素的内联元素

<style>
p {display:inline;}
</style>
</head><body>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>

2.如何显示一个元素的块元素

<style>
span
{display:block;
}
</style>
</head>
<body><span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>

3.如何使用一个表的collapse属性

Firstname	Lastname
Peter	Griffin
Lois	Griffin

<style>
table, th, td {border: 1px solid black;
}tr.collapse {visibility: collapse;
}
</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></tr><tr class="collapse"><td>Lois</td><td>Griffin</td></tr>
</table>

CSS Position（定位）

position属性指定了元素的定位类型， position属性的五个值：

static
relative
fixed
absolute
sticky
元素可以使用顶部，底部，左侧和右侧属性定位，然而这些属性无法工作，除非事先设定position属性，他们也有不同的工作方式，这取决于定位方法。

Static定位（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static属性</title>
<style>
div.static {position: static;border: 3px solid #73AD21;
}
</style>
</head>
<body><h2>position: static;</h2><p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p><div class="static">
该元素使用了 position: static;
</div></body>
</html>

fixed定位（固定定位）

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>fixed定位</title> 
<style>
p.pos_fixed
{position:fixed;top:30px;right:5px;
}
</style>
</head>
<body><p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠

Relative定位（相对定位）

相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>relative相对定位</title> 
<style>
h2.pos_left
{position:relative;left:-20px;
}h2.pos_right
{position:relative;left:20px;
}
</style>
</head><body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body></html>

absolute定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>absolute绝对定位</title> 
<style>
h2
{position:absolute;left:100px;top:150px;
}
</style>
</head><body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body></html>

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

sticky定位（粘性定位）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>z-index堆叠顺序</title> 
<style>
img
{position:absolute;left:0px;top:0px;z-index:-1;
}
</style>
</head><body>
<h1>This is a heading</h1>
<img src="../img/3147.jpg" width="200" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

裁剪元素外形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>裁剪图片</title> 
<style>
img 
{position:absolute;clip:rect(2px,60px,200px,0px);
}
</style>
</head><body>
<img src="../img/3147.jpg" width="100" height="140" />
</body>
</html>

效果图如下：
在这里插入图片描述

Overflow属性：

使用滚动条来显示元素内溢出的内容，这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定区域过大时如何设置适应：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>overflow属性</title> 
<style>
div.ex1 {background-color: lightblue;width: 110px;height: 110px;overflow: scroll;
} div.ex2 {background-color: lightblue;width: 110px;height: 110px;overflow: hidden;
}div.ex3 {background-color: lightblue;width: 110px;height: 110px;overflow: auto;
}div.ex4 {background-color: lightblue;width: 110px;height: 110px;overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1><p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p><h2>overflow: scroll:</h2>
<div class="ex1">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div><h2>overflow: hidden:</h2>
<div class="ex2">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div><h2>overflow: auto:</h2>
<div class="ex3">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div><h2>overflow: visible (默认):</h2>
<div class="ex4">1111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111</div></body>
</html>

更改光标：

演示如何改变光标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>更改光标</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Overflow布局

CSS overflow 属性用于控制内容溢出元素框时显示的方式，可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

<style>
#overflowTest {background: #4CAF50;color: white;padding: 60px;width: 80%;height: 150px;overflow: scroll;border: 2px solid #ccc;
}
</style>
</head>
<body><div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>

在这里插入图片描述

overflow: visible

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：
在这里插入图片描述

<style>
div {background-color: #eee;width: 200px;height: 50px;border: 1px dotted black;overflow: visible;
}
</style>
</head>
<body><div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

CSS Float浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动：元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>float浮动</title>
<style>
img 
{float:left;
}
</style>
</head><body>
<p>在下面的段落中，我们添加了一个 <b>float:left</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="../img/3147.jpg" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body></html>

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>彼此相邻的浮动元素</title> 
<style>
.thumbnail 
{float:left;width:110px;height:90x;margin:8px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="../img/123.jpg" width="170" height="90">
<img class="thumbnail" src="../img/234.jpg.png" width="107" height="80">
<img class="thumbnail" src="../img/478.jpg.jpg" width="116" height="90">
<img class="thumbnail" src="../img/692.jpg.jpg" width="120" height="90">
<img class="thumbnail" src="../img/3147.jpg" width="107" height="90">
</body>
</html>

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>clear清除浮动</title> 
<style>
.thumbnail 
{float:left;width:110px;height:90px;margin:5px;
}
.text_line
{clear:both;margin-bottom:2px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="../img/123.jpg" width="107" height="90">
<img class="thumbnail" src="../img/234.jpg.png" width="107" height="80">
<img class="thumbnail" src="../img/3147.jpg" width="110" height="90">
<img class="thumbnail" src="../img/478.jpg.jpg" width="100" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="../img/692.jpg.jpg" width="107" height="90">
<img class="thumbnail" src="../img/fir.jpg.jpeg" width="107" height="80">
<img class="thumbnail" src="../img/light.jpg.jpeg" width="116" height="90">
<img class="thumbnail" src="../img/R-C.gif" width="120" height="90">
</body>
</html>

在这里插入图片描述

创建一个没有表格的网页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>创建一个没有</title> 
<style>
* {box-sizing: border-box;
}
body {margin: 0;
}
.header {background-color: #2196F3;color: white;text-align: center;padding: 15px;
}
.footer {background-color: #444;color: white;padding: 15px;
}
.topmenu {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #777;
}
.topmenu li {float: left;
}
.topmenu li a {display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none;
}
.topmenu li a:hover {background-color: #222;
}
.topmenu li a.active {color: white;background-color: #4CAF50;
}
.column {float: left;padding: 15px;
}
.clearfix::after {content: "";clear: both;display: table;
}
.sidemenu {width: 25%;
}
.content {width: 75%;
}
.sidemenu ul {list-style-type: none;margin: 0;padding: 0;
}
.sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666;
}
.sidemenu li a:hover {background-color: #555;color: white;
}
.sidemenu li a.active {background-color: #008CBA;color: white;
}
</style>
</head>
<body><ul class="topmenu"><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><li><a href="#about">关于我们</a></li>
</ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight">The Flight</a></li><li><a href="#city" class="active">The City</a></li><li><a href="#island">The Island</a></li><li><a href="#food">The Food</a></li><li><a href="#people">The People</a></li><li><a href="#history">The History</a></li><li><a href="#oceans">The Oceans</a></li></ul></div><div class="column content"><div class="header"><h1>The City</h1></div><h1>Chania</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p><p>You will learn more about responsive web pages in a later chapter.</p></div>
</div><div class="footer"><p>底部文本</p>
</div></body>
</html>