使用css,给下面的html 加上-|||-背景色:蓝色blue-|||-字体大小设置为:16px-|||-宽度:100px-|||-高度:100px-|||-代码如下: 〈div class=“school”〉培黎职业学院〈/div〉
时间: 2024-06-15 18:07:22 浏览: 108
要给上述HTML代码添加CSS样式,可以使用以下代码:
```css
<style>
.school {
background-color: blue;
font-size: 16px;
width: 100px;
height: 100px;
}
</style>
```
这段CSS代码将会给class为"school"的div元素添加背景色为蓝色(blue),字体大小为16像素(16px),宽度为100像素(100px),高度为100像素(100px)的样式。
相关问题
请帮我用html和css写一个简单的网页,要求为:网页背景色为白色,网页总宽度为1900px,中间放一个div板块,这个div板块居中,宽度为1190px,高度为940px,背景色为蓝色,在内容板块里边,再放五个div板块,它们的背景色都为红色,横向排列,间距为10px,这五个div只能在一行。
好的,以下是符合您要求的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单网页</title>
<style>
body {
background-color: #fff;
}
#container {
width: 1900px;
margin: 0 auto;
}
#content {
width: 1190px;
height: 940px;
margin: 0 auto;
background-color: blue;
display: flex;
}
.box {
width: 220px;
height: 920px;
background-color: red;
margin-right: 10px;
}
.box:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
```
解释一下代码:
- `body` 元素的背景色为白色,符合要求。
- `#container` 元素的宽度为 1900px,且通过 `margin: 0 auto` 属性使其居中,也符合要求。
- `#content` 元素的宽度为 1190px,高度为 940px,背景色为蓝色,同时通过 `display: flex` 属性将其内部的子元素变成 flex 容器,也就是让子元素横向排列,符合要求。
- `.box` 类的元素宽度为 220px,高度为 920px,背景色为红色,同时通过 `margin-right: 10px` 属性设置元素之间的间距为 10px,最后通过 `:last-child` 选择器将最后一个元素的间距设为 0,符合要求。
希望这个代码示例对您有所帮助!
请帮我用html和css做一个美观的导航栏,共五个导航菜单,横向排列,每个导航菜单高度为30px,宽度为80px,鼠标点击激活的菜单背景色变为蓝色,字体变为白色,没有激活的菜单背景色跟网页背景色一样都是白色,字体为黑色,当鼠标掠过顶级导航菜单的时候,这个顶级菜单背景色变为蓝色,并同时展出二级菜单,每个顶级菜单下边都有三个二级菜单,每个二级菜单刚展出的时候背景颜色都是灰色,字体是黑色,当鼠标掠过二级菜单的时候,颜色变成蓝色,如果点击激活了二级菜单,那么松开鼠标的时候,二级菜单隐藏,它的父级菜单就变为激活的菜单。请帮我编写html代码以实现以上效果,可以同时使用css,但不允许用js等其他技术语言。
好的,我可以为您提供一个html和css的代码示例,实现您的要求。以下是代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置导航栏样式 */
nav {
background-color: white;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
}
/* 设置导航菜单样式 */
nav ul {
list-style: none;
display: flex;
align-items: center;
}
nav ul li {
height: 30px;
width: 80px;
text-align: center;
line-height: 30px;
position: relative;
}
/* 设置二级菜单样式 */
nav ul li ul {
list-style: none;
position: absolute;
top: 30px;
left: 0;
background-color: #f5f5f5;
display: none;
width: 240px;
padding: 10px;
}
nav ul li ul li {
height: 30px;
line-height: 30px;
text-align: center;
}
/* 设置菜单点击激活样式 */
nav ul li.active {
background-color: blue;
color: white;
}
/* 设置二级菜单点击激活样式 */
nav ul li ul li.active {
background-color: blue;
color: white;
}
/* 设置菜单鼠标悬停样式 */
nav ul li:hover {
background-color: blue;
color: white;
cursor: pointer;
}
/* 设置二级菜单鼠标悬停样式 */
nav ul li ul li:hover {
background-color: blue;
color: white;
cursor: pointer;
}
/* 设置鼠标悬停展示二级菜单 */
nav ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="active">菜单1
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>菜单2
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>菜单3
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>菜单4
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>菜单5
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
```
您可以将以上代码直接复制到一个HTML文件中,并在浏览器中查看效果。希望这能够帮到您!
阅读全文