使用HTML&CSS模拟制作电视剧中万兽集团的官方网站,希望各位朋友们喜欢，话不多说，放代码(适合新手练习)

最新推荐文章于 2024-05-31 08:30:00 发布

爱编程的鸡翅

最新推荐文章于 2024-05-31 08:30:00 发布

阅读量549

点赞数

本文链接：https://blog.csdn.net/qq_64112905/article/details/125568619

版权

web前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

以下是HTML部分，页面设计稍微简单，是比较基础的静态网页(图片可以自己上网搜索即可)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万兽集团</title>
    <link rel="stylesheet" type="text/css" href="E:\web前端\万兽集团官网\style01.css" />
</head>
<body>
    <!--header标签部分-->
    <div class="header">
        <p class="b">万兽集团</p>
        <span>小螺丝，大作为</span>
		<p class="a"><a href="#">了解万兽</a> | <a href="#">企业文化</a> | <a href="#">注册登录</a></p>
    </div>
    <!--导航栏-->
    <div class="nav">
        <a href="E:\web前端\万兽集团官网\万兽集团.html">首页</a>
        <a href="E:\web前端\万兽集团官网\公司部门.html">公司部门</a>
        <a href="#">公司产品</a>
        <a href="#">公司服务</a>
        <a href="#">新闻资讯</a>
        <a href="E:\web前端\万兽集团官网\公司领导.html">公司领导</a>
        <a href="E:\web前端\万兽集团官网\诚聘英才.html">诚聘英才</a>
        <a href="E:\web前端\万兽集团官网\联系方式.html">联系方式</a>
    </div>
   <!--滚动条-->
    <div class="marquee"><marquee style="color: #0dc58d;">福东市优秀模范企业、福东市优秀劳模示范单位、先进单位奖、全国十大优秀员工来源单位、最佳绩效奖. 最能折腾奖</marquee></div>
	 <!--公司轮播图-->
    <div class="banner">
		<script src="E:\web前端\万兽集团官网\jquery-1.12.4.min.js"></script>
		<script src="E:\web前端\万兽集团官网\case04.js"></script>
		<ul class="hot">
		<!--轮播图片-->
		    <li><a href="#"><img src="E:\web前端\万兽集团官网\1.jpg" style="width: 1000px; height: 400px;" ></a></li>
		    <li><a href="#"><img src="E:\web前端\万兽集团官网\2.jpg" style="width: 1000px; height: 400px;"></a></li>
		    <li><a href="#"><img src="E:\web前端\万兽集团官网\3.jpg" style="width: 1000px; height: 400px;"></a></li>
		    <li><a href="#"><img src="E:\web前端\万兽集团官网\4.jpg"  style="width: 1000px; height: 400px;"></a></li>
			<li><a href="#"><img src="E:\web前端\万兽集团官网\1.jpg"  style="width: 1000px; height: 400px;"></a></li>
		</ul>
		<!--小圆点-->
		<ul class="dot"><li class="on"></li><li></li><li></li><li></li><li></li></ul>
		<!-- 左右翻页箭头-->
		<div class="arrow"><span class="prev">&lt;</span><span class="next">&gt;</span></div>
	</div>

    <!--领导展示-->
    <p class="p1">集团领导人</p>
    <div>
        <img src="https://img2.baidu.com/it/u=1798470569,4124769141&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" style="width:150px;height: 150px; border-radius: 50%;margin-left: 300px;margin-top: 70px;" />
        <P style="margin-left: 300px;margin-top: 10px;font-family: 楷体;">集团董事长：陆喜发</P>
    </div>
    <div>
        <img src="https://img2.baidu.com/it/u=4200688672,233662891&fm=253&fmt=auto&app=138&f=JPEG?w=363&h=3630" style="width:150px;height: 150px; border-radius: 50%;position: absolute;left: 560px;top: 635px;" />
        <P style="position: absolute;left: 565px;top: 798px;font-family: 楷体;">总经理：丽萨榕</P>
    </div>
    <div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphotocdn.sohu.com%2Fkistar%2Ffengmian%2F1164%2F1164011%2F1164011_ver_big_20170707160005.jpg&refer=http%3A%2F%2Fphotocdn.sohu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658625800&t=adc64329b31204c31d7e084c28401f49" style="width:150px;height: 150px; border-radius: 50%;position: absolute;left: 850px;top: 635px;" />
        <P style="position: absolute;left: 873px;top: 798px;font-family: 楷体;">经理：傅兰尼</P>
    </div>
    <div>
        <img src="https://img1.baidu.com/it/u=2459167603,1089129278&fm=253&fmt=auto&app=138&f=JPEG?w=645&h=500" style="width:150px;height: 150px; border-radius: 50%;position: absolute;left: 1080px;top: 635px;" />
        <P style="position: absolute;left: 1098px;top: 798px;font-family: 楷体;">人事主管：万主管</P>
    </div>

    <!--公司产品及服务-->
    <p class="p2">集团公告</p>
    <div class="content">
        <!--左边-->
        <div class="content_left">
            <p style="font-family:楷体; font-size:20px; padding-left: 50px; padding-top: 20px;">集团资讯</p>
            <ul class="ul1" >
				<li><a href="#">关于信息部开发最新产品《红娘测姻缘》小程序的公告</a></li>
				<hr style="font-weight: bold" width="350px" color="#d6d6d6" />
				<li><a href="#">销售部年销售额高达90万，相比于去年增长了15万，再创新高</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">迫事部的人均薪资水平高达8000元，远远超过采购部的人均薪资水平</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">恭喜我集团与福东小黑科技网络有限公司达成商业合作</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">关于端午节我集团放假的通知</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">万兽集团：万兽激励操正式发布</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
                <li><a href="#">董事长莅临公司现场指导销售部、信息部等相关工作</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
                <li><a href="#">集团与友金宝公司达成合作，为兄弟公司提供技术支持</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
			</ul>
        </div>
        <!--右边-->
        <div class="content_right">
            <p style="font-family:楷体; font-size:20px; padding-left: 50px; padding-top: 20px;">集团产品</p>
            <ul class="ul1" >
				<li><a href="#">集团新产品叮叮乐的使用说明书</a></li>
				<hr style="font-weight: bold" width="350px" color="#d6d6d6" />
				<li><a href="#">万兽推出水果味自热小火锅</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">万兽亲儿子项目：哭泣头套</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">信息部开发出闪播直播软件助手</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">集团亲儿子项目：万兽健康操</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
				<li><a href="#">集团亲儿子项目：董事长自传全套</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
                <li><a href="#">集团亲儿子项目：防狼喷雾</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
                <li><a href="#">集团亲儿子项目：嘿凤梨小蛋糕</a></li>
				<hr style="font-weight: bold" color="#d6d6d6" />
			</ul>
        </div>
    </div>

    <!--图片展示-->
    <div class="img">
        <p class="p3">集团风气</p>
        <img src="E:\web前端\万兽集团官网\微信图片_20220626092118.jpg" class="i1" />
		<img src="E:\web前端\万兽集团官网\微信图片_20220626092140.jpg" class="i2"/>
		<img src="E:\web前端\万兽集团官网\微信图片_20220626092143.jpg" class="i3"/>
		<img src="E:\web前端\万兽集团官网\微信图片_20220626092148.jpg" class="i4"/>
		<img src="E:\web前端\万兽集团官网\微信图片_20220626092152.jpg" class="i5"/>
    </div>

    <div class="foot">
        <div class="coni">
            <p>版权所有： 韦正导演 & 电视剧破事精英</p>
        </div>
        <div class="a" >
            <p class="f1">Copyright © 2022 - 2099 万兽集团 All Rights Reserved.</p>
			<P class="f2">福东ICP备12138号-2</P>
        </div>
    </div>
</body>
</html>

css样式代码

*{margin: 0;padding: 0;border: 0;}
.header .b{
    position:absolute;
    left: 40px;
    top: 6px;
    font-family: "楷体";
    font-size: 20px;
}
.header{
    width: 100%;
    height: 35px;
    background-color: rgb(121, 237, 198);
}
.header .a{
    position:absolute;
    left: 1200px;
    top: 6px;
    font-family: "楷体";
}
.header .a a{
    text-decoration: none;
    color: #000000;
}
.header .a a:hover{
    color: rgb(47, 194, 243);
}
.header span{
    position: absolute;
    left: 700px;
    top: 6px;
    color: rgb(62, 147, 245);
    font-weight: bold;
    font-family: "楷体";
}
/*导航栏*/
.nav{
	width: 100%;
	max-width: 1700px;
	height: 30px;
	margin: 0 auto;
	background-color: #16dea2;
}
.nav a{
	display: inline-block;
	width: 100px;
	height: 30px;
	background-color: #16dea2;
	text-align: center;
	line-height: 30px;/*垂直居中*/
	color: white;
	text-decoration: none;
	margin-left: 77px;
    font-family: "楷体";
}
.nav a:hover{
	background-color: #249a72;
}
/*导航栏*/

.banner{position:relative; overflow:hidden;margin:10px auto;width:1000px;height:400px;}
.banner ul{margin:0;padding:0;list-style:none;}
.hot{position:absolute;top:0;left:0;}
.hot li{float:left;}
/* 小圆点样式 */
.dot{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}
.dot li{display:block;display:inline-block;margin:0 5px;width:15px;height:15px;border-radius:100%;background:rgba(145,144,144,.5);cursor:pointer;}
.dot .on{background-color:#fff;}
/* 左右翻页箭头样式 */
.arrow{display:none;}
.arrow span{display:block;width:50px;height:100px;background:rgba(0,0,0,.6);color:#fff;text-align:center;font-size:40px;line-height:100px;cursor:pointer;}
.arrow .prev{position:absolute;top:50%;left:0;margin-top:-50px;}
.arrow .next{position:absolute;top:50%;right:0;margin-top:-50px;}

.marquee{
	width: 1000px;
	height: 60px;
	margin: 0 auto;
	margin-top: 10px;
}
.p1{
    position: absolute;
	top: 580px;
	left: 700px;
	font-size: 30px;
	font-weight: bold;
    font-family: "楷体";
}
.p2{
    position: absolute;
	top: 870px;
	left: 710px;
	font-size: 30px;
	font-weight: bold;
    font-family: "楷体";
}
.content{
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}
.content .content_left{
	width: 500px;
	height: 400px;
	margin-top: 110px;
	border: 1px solid #16dea2;
}
.ul1{
	font-size: 14px;
	list-style: none;
	padding-left: 50px;
	padding-top: 20px;
	font-family: "楷体";
}
.ul1 li{
	padding-top: 20px;
}
.ul1 a{color: #000000; text-decoration: none; }
.ul1 a:hover{ color: #0ac78e; }
.content .content_right{
	width: 500px;
	height: 400px;
	margin-top: 110px;
	border: 1px solid #16dea2;
	position: absolute;
	left: 800px;
	top: 816px;
}
.img{
	width: 1000px;
	height: 200px;
	padding-left: 290px;
}
.p3{
    position: absolute;
	top: 1370px;
	left: 710px;
	font-size: 30px;
	font-weight: bold;
    font-family: "楷体";
}
.i1{
	width: 190px;
	height: 100px;
}
.i2{
	width: 190px;
	height: 100px;
}
.i3{
	width: 190px;
	height: 100px;
}
.i4{
	width: 190px;
	height: 100px;
}
.i5{
	width: 190px;
	height: 100px;
}
.foot{
	width: 100%;
	height: 150px;
	margin: 0 auto;
	background-color: rgb(121, 237, 198);
	color: #000000;
	margin-top: 10px;
	font-family: "楷体";
}
.coni p{
	padding-left: 620px;
	padding-top: 40px;
}
.a .f1{
	padding-left: 540px;
	padding-top: 20px;
}
.a .f2{
	padding-left: 680px;
	padding-top: 20px;
}