写一个比较美的登陆html页面
时间: 2023-03-12 10:09:30 浏览: 74
答:我可以用 HTML 和 CSS 来创建一个美观而且功能强大的登录页面。我会使用简单的表单元素来创建一个可用的登录界面,并使用 CSS 来美化它的外观。此外,我也会使用 JavaScript 来验证用户输入的信息,使登录过程更加安全和可靠。
相关问题
html写一个很美的烟花表白代码
当然可以!以下是一个简单的HTML代码示例,可以实现一个烟花表白效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花表白</title>
<style>
body {
background-color: black;
}
#firework {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
animation: explode 2s infinite;
}
@keyframes explode {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(10);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="firework"></div>
</body>
</html>
```
这段代码会在页面中心显示一个红色的圆形元素,通过CSS的动画效果实现了烟花爆炸的效果。你可以将这段代码保存为一个HTML文件,然后在浏览器中打开,就能看到烟花表白的效果了。
用web写一个京东页面布局
好的,以下是一个简单的京东页面布局,仅作参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>京东页面布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #E4393C;
color: #fff;
padding: 10px;
text-align: center;
}
.navbar {
background-color: #F5F5F5;
height: 40px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 30px;
font-weight: bold;
}
.search {
display: flex;
align-items: center;
}
.search input[type="text"] {
border: none;
padding: 5px;
margin-right: 5px;
width: 300px;
border-radius: 5px;
}
.search button {
background-color: #E4393C;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.banner {
background-color: #F5F5F5;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.banner img {
max-width: 100%;
max-height: 100%;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.product {
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
width: 30%;
margin-bottom: 20px;
}
.product img {
max-width: 100%;
max-height: 100%;
margin-bottom: 10px;
}
.product .name {
font-size: 16px;
font-weight: bold;
}
.product .price {
font-size: 14px;
color: #E4393C;
margin-top: 5px;
}
.footer {
background-color: #F5F5F5;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>京东页面布局</h1>
</div>
<div class="navbar">
<div class="logo">京东商城</div>
<div class="search">
<input type="text" placeholder="搜索商品">
<button>搜索</button>
</div>
</div>
<div class="banner">
<img src="https://img12.360buyimg.com/da/jfs/t1/136496/30/12192/191684/5f6d2b0fE6a84a8f7/f645d4ec5dce3e91.jpg">
</div>
<div class="products">
<div class="product">
<img src="https://img12.360buyimg.com/n7/jfs/t1/154617/28/11723/124725/5fc71f4cEe6d8a0b1/9e5e3a59d2a50c5b.jpg">
<div class="name">小米电视4A 32英寸 四核64位高清网络液晶平板电视机</div>
<div class="price">¥799.00</div>
</div>
<div class="product">
<img src="https://img12.360buyimg.com/n7/jfs/t1/136063/16/6025/188851/5f39e9d3Ef8c8f8f6/9405a2d3d51c5d8f.jpg">
<div class="name">戴尔(DELL)成就3470 英特尔酷睿i5 台式电脑整机</div>
<div class="price">¥3999.00</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n7/jfs/t1/140952/38/17333/155752/5fe8d8a6E9c9e4f38/2d4d5f5eab1a0a24.jpg">
<div class="name">美的(Midea)电烤箱家用大容量多功能烤箱</div>
<div class="price">¥439.00</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n7/jfs/t1/155006/24/13911/66528/6034c7c9E08380a25/3d7d48c701f6502e.jpg">
<div class="name">HUAWEI FreeBuds 4i 无线耳机</div>
<div class="price">¥499.00</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n7/jfs/t1/152647/20/18024/95621/6043b6caE3edd0f8c/3f5cd3e5d5f1c3c3.jpg">
<div class="name">华为 MateBook 14 2020款 锐龙版</div>
<div class="price">¥4999.00</div>
</div>
<div class="product">
<img src="https://img10.360buyimg.com/n7/jfs/t1/139899/29/18553/111747/5fd85b4fE5e5f1a65/4d5c37c6a1bdcb7e.jpg">
<div class="name">小米10至尊纪念版 5G手机</div>
<div class="price">¥5299.00</div>
</div>
</div>
<div class="footer">
<p>京东商城 © 2021</p>
</div>
</body>
</html>
```
效果如下图所示:
![京东页面布局](https://i.imgur.com/pmd6H6r.png)