請你幫製作一個HTML網頁,需要左邊100px為灰色,右邊為白色
时间: 2024-03-16 14:44:00 浏览: 22
好的,以下是一个简单的 HTML 页面,左边宽度为 100px,颜色为灰色,右边为白色:
```html
<!DOCTYPE html>
<html>
<head>
<title>左右布局</title>
<style>
.left {
float: left;
width: 100px;
height: 100vh;
background-color: #ccc;
}
.right {
float: left;
width: calc(100% - 100px);
height: 100vh;
background-color: #fff;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
```
在上述代码中,我们使用了 CSS 的 `float` 属性来让左右两边并排显示,并分别设置了宽度、高度和背景颜色。同时,我们使用了 `calc` 函数来计算右边的宽度,确保其占满整个窗口。
相关问题
用html制作一个轮播图,包含左右调整的按钮,轮播间隔时间为2秒
好的,以下是一个简单的轮播图的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.slider {
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 10px #cccccc;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.slider button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 50%;
font-size: 24px;
line-height: 1;
text-align: center;
cursor: pointer;
}
.slider button.prev {
left: 20px;
}
.slider button.next {
right: 20px;
}
</style>
</head>
<body>
<div class="slider">
<img src="https://via.placeholder.com/600x400/ff0000/ffffff?text=Slide%201" alt="Slide 1" class="active">
<img src="https://via.placeholder.com/600x400/00ff00/ffffff?text=Slide%202" alt="Slide 2">
<img src="https://via.placeholder.com/600x400/0000ff/ffffff?text=Slide%203" alt="Slide 3">
<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
</div>
<script>
var slideIndex = 0;
var timer = setInterval(showSlide, 2000);
function showSlide() {
var slides = document.querySelectorAll('.slider img');
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
slides[slideIndex].classList.add('active');
}
function prevSlide() {
clearInterval(timer);
var slides = document.querySelectorAll('.slider img');
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slideIndex--;
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
slides[slideIndex].classList.add('active');
timer = setInterval(showSlide, 2000);
}
function nextSlide() {
clearInterval(timer);
var slides = document.querySelectorAll('.slider img');
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
slides[slideIndex].classList.add('active');
timer = setInterval(showSlide, 2000);
}
</script>
</body>
</html>
```
这个轮播图有以下特点:
- 采用简单的白色背景和灰色边框,看起来干净整洁。
- 使用了Google字体库中的Arial字体。
- 轮播图容器采用了圆角和阴影效果,视觉效果更好。
- 轮播图容器使用了overflow:hidden属性,使得图片超出容器部分不显示。
- 图片采用绝对定位,覆盖在容器上方,且默认显示第一张图片。
- 图片的透明度采用CSS过渡效果,切换时会有淡入淡出的效果。
- 左右调整按钮采用了圆形和黑色背景,鼠标悬停时会有颜色变化。
- 左右调整按钮采用JavaScript实现,点击时可以调整轮播图。
你可以根据需要进行自由修改,如改变轮播图容器的大小、调整图片大小等等。
制作一个精美的介绍孙燕姿音乐的网页css
好的,下面是一个简单的介绍孙燕姿音乐的网页示例:
HTML 代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>孙燕姿音乐介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>孙燕姿音乐介绍</h1>
</header>
<main>
<div class="container">
<img src="https://i.loli.net/2021/12/07/3OQKUZI8Lb5tRjH.jpg" alt="孙燕姿">
<h2>孙燕姿</h2>
<p>孙燕姿,1983年7月23日出生于新加坡,华语流行女歌手、词曲创作人,被誉为“亚洲天后”。</p>
</div>
<div class="container">
<h2>获奖情况</h2>
<ul>
<li>2000年:第12届金曲奖新人奖</li>
<li>2004年:MTV音乐大奖华语最佳女演唱人奖</li>
<li>2008年:第19届金曲奖最佳国语女演唱人奖</li>
<li>2010年:第21届金曲奖最佳国语女演唱人奖</li>
<li>2014年:第25届金曲奖最佳国语女演唱人奖</li>
</ul>
</div>
<div class="container">
<h2>代表作品</h2>
<ol>
<li>《遇见》</li>
<li>《雨天》</li>
<li>《我怀念的》</li>
<li>《天黑黑》</li>
<li>《传说》</li>
</ol>
</div>
</main>
<footer>
<p>版权所有 © 2021 孙燕姿音乐介绍</p>
</footer>
</body>
</html>
```
CSS 代码:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 头部样式 */
header {
background-color: #222;
color: #fff;
text-align: center;
padding: 20px 0;
}
/* 主体样式 */
main {
max-width: 800px;
margin: 0 auto;
padding: 40px;
}
.container {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
display: block;
margin: 0 auto;
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
object-position: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 30px;
}
ul, ol {
font-size: 16px;
line-height: 1.8;
margin: 0 0 30px 0;
padding-left: 20px;
}
ul li, ol li {
margin-bottom: 10px;
}
/* 底部样式 */
footer {
text-align: center;
padding: 20px;
background-color: #222;
color: #fff;
}
```
这个网页使用了简单的 HTML 结构,包含了一个头部、主体和底部。主体部分包含了三个容器,分别用于展示孙燕姿的个人信息、获奖情况和代表作品。
CSS 样式使用了现代化的设计风格,包括了圆角、阴影和响应式布局。网页的背景色为浅灰色,容器的背景色为白色。头部和底部的背景色为黑色,文字颜色为白色。
在 HTML 中,使用了 `<img>` 标签来展示孙燕姿的照片。CSS 中使用了 `border-radius` 属性来实现圆形头像,使用了 `box-shadow` 属性来实现阴影效果。
代表作品部分使用了有序列表,获奖情况部分使用了无序列表。列表项之间的间隔使用了 `margin` 属性来实现。
整个网页的设计简洁美观,适合用作介绍孙燕姿音乐的网页。
相关推荐
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)