明星个人网站蔡徐坤网页设计(HTML+CSS)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="css/css.css"/>
    <title>蔡徐坤</title>
    </head>
	<div class="con">
    <body >
        <div class="wrapin">
			<!--头部-->
			
			<header>
				
					<img src="images/p6.jpg" width="100%">
				
				<nav>
					<a href="index.html">首页</a>
					<a href="about.html">演艺经历</a>
					<a href="fengxian.html">歌与奖</a>
                    <a href="geng.html">玩梗</a>
					<a href="denglu.html">登录</a>
					<a href="liuyan.html">留言</a>
					<a href="zhoubian.html">周边</a>
					<a href="gouwuche.html">购物车</a>
				</nav>
			</header>
			

			<div class="box1 clearfix">
				<div class="left">
					<img src="images/p1.jpg" alt=""width="50%">
				</div>
				<div class="text">
					<h3>蔡徐坤</h3>
					<p>
						蔡徐坤(KUN),1998年8月2日出生于浙江省温州市,户籍湖南省吉首市,中国内地男歌手、演员、原创音乐制作人 、MV导演 。
2012年8月,蔡徐坤参演的偶像剧《童话二分之一》播出,由此开始步入大众视线 。2018年1月,参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道,成为限定男团NINE PERCENT队长 ;8月,发行首张EP《1》 ,获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 ;随后,他还发行原创单曲《Wait Wait Wait》,并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月,被授予“中牙友好大使暨中牙杰出青年领袖人物”称号;3月,成功开启横跨三个国家、六座城市的海外公演《ONE》;7月,发行首张数字专辑《YOUNG》;10月,携手中国儿童少年基金会共同设立“葵计划爱心基金”。
					</p>
					
				</div>
			</div>
			
			<div class="list">
				<ul class="clearfix">
					<li><img src="images/p2.jpg" width="241"></li>
					<li><img src="images/p3.jpg" ></li>
					<li><img src="images/p4.jpg" ></li>
					<li><img src="images/p5.jpg" ></li>
				</ul>
			</div>
	
		
			<!--底部-->
			<footer>
				蔡徐坤
			</footer>
		</div>
	</div>
	</body>
</html>

详情见压缩包

以下是一个简单的蔡徐坤偶像界面的 HTMLCSS 代码示例: HTML 代码: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蔡徐坤个人网站</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <h1>蔡徐坤</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">音乐</a></li> <li><a href="#">视频</a></li> <li><a href="#">资讯</a></li> </ul> </nav> </div> <div class="banner"> <img src="https://i.loli.net/2021/09/09/XH6n3t2s9fZcYKv.png" alt="蔡徐坤"> </div> <div class="content"> <h2>蔡徐坤简介</h2> <p>蔡徐坤,1998年8月2日出生于湖南省长沙市,中国内地男歌手、演员、舞者。2014年,蔡徐坤在全国舞蹈比赛《中华舞蹈大赛》中获得全国总冠军。2016年,参加选秀节目《燃烧吧少年》获得冠军。2017年,以练习生身份参加选秀节目《偶像练习生》。</p> <h2>蔡徐坤作品</h2> <ul> <li><a href="#">1. 《No Exception》</a></li> <li><a href="#">2. 《You Can Be My Girl》</a></li> <li><a href="#">3. 《Wait Wait Wait》</a></li> <li><a href="#">4. 《I Wanna Get Love》</a></li> </ul> </div> <div class="footer"> <p>© 2021 蔡徐坤个人网站</p> </div> </body> </html> ``` CSS 代码: ``` /* 全局样式 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } /* 头部样式 */ .header { background-color: #333; color: #fff; padding: 10px; } .header h1 { margin: 0; font-size: 32px; } .header nav ul { margin: 0; padding: 0; list-style: none; } .header nav ul li { display: inline-block; } .header nav ul li a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; } .header nav ul li a:hover { background-color: #555; } /* 横幅样式 */ .banner img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* 内容样式 */ .content { padding: 20px; } .content h2 { margin-top: 0; } .content ul { margin: 0; padding: 0; list-style: none; } .content ul li { margin-bottom: 10px; } .content ul li a { color: #333; text-decoration: none; } .content ul li a:hover { text-decoration: underline; } /* 底部样式 */ .footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` 你可以将上述代码保存为 `index.html` 和 `style.css` 文件,然后在浏览器中打开 `index.html` 文件,查看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值