利用JavaScript书写代码并用HTML格式:1.设置网页背景色rgba(23,56,78,0.2),至少俩种方式。2.设置box宽度为500px,居中对齐,背景色:#f4f4f4,至少俩种方式,3.设置u1下li样式,文字红色,至少俩种方式
时间: 2024-05-02 15:17:29 浏览: 14
1.
方式一:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置网页背景色</title>
<style>
body {
background-color: rgba(23, 56, 78, 0.2);
}
</style>
</head>
<body>
<h1>这是一个设置网页背景色的示例</h1>
<p>使用CSS样式表中的background-color属性,可以设置网页的背景色。</p>
</body>
</html>
```
方式二:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置网页背景色</title>
<style>
html {
background-color: rgba(23, 56, 78, 0.2);
}
</style>
</head>
<body>
<h1>这是一个设置网页背景色的示例</h1>
<p>使用CSS样式表中的background-color属性,可以设置网页的背景色。</p>
</body>
</html>
```
2.
方式一:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置box宽度并居中对齐</title>
<style>
.box {
width: 500px;
margin: 0 auto;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="box">
<h1>这是一个设置box宽度并居中对齐的示例</h1>
<p>使用CSS样式表中的width属性和margin属性,可以设置盒子的宽度和居中对齐。</p>
</div>
</body>
</html>
```
方式二:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置box宽度并居中对齐</title>
<style>
.box {
width: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="box">
<h1>这是一个设置box宽度并居中对齐的示例</h1>
<p>使用CSS样式表中的width属性和position属性,可以设置盒子的宽度和居中对齐。</p>
</div>
</body>
</html>
```
3.
方式一:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置u1下li样式</title>
<style>
ul li {
color: red;
}
</style>
</head>
<body>
<h1>这是一个设置u1下li样式的示例</h1>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<p>使用CSS样式表中的color属性,可以设置文本的颜色。</p>
</body>
</html>
```
方式二:
```html
<!DOCTYPE html>
<html>
<head>
<title>设置u1下li样式</title>
<style>
ul li {
color: red !important;
}
</style>
</head>
<body>
<h1>这是一个设置u1下li样式的示例</h1>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<p>使用CSS样式表中的!important关键字,可以强制覆盖其他样式。</p>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)