HTML+CSS+JS 网页设计实例静态响应式前端网页模板(一键复制)④

耀南.

已于 2024-05-24 16:43:46 修改

阅读量831

点赞数 17

分类专栏：静态网页响应式设计前端模板前端大学生期末作业静态网页/小程序/毕设项目精品文章标签：前端 html css javascript

于 2024-05-24 10:52:59 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/139168819

版权

前端大学生期末作业静态网页/小程序/毕设项目精品同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

静态网页响应式设计前端模板

7 篇文章 0 订阅

订阅专栏

简介：前端领域创作者。扫码或搜索添加文末微信「耀南」：🍗 回复 ”网站模板“，免费送网站模板！

欢迎点赞 👍 收藏 ⭐留言 📝 私信📄

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【小程序模板/PC登录页模板/GPT开源/ 分布式架构系统】

❤ 【web前端静态网页设计/小程序前端成品项目——🔥🔥移动成品项目精品实战案例】

一、网页效果🌌

二、内容简介🧩

通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。

接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、前端介绍🔗：

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

五、目录结构📂

六、代码💒

<!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>
</head>
<link rel="stylesheet" href="shang.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <script src="dianshang.js" type="text/javascript" charset="UTF-8"></script>
    <!-- 顶部 -->
	<div id="top">
        <div class="top_box">
            <span class="top_text">Free  Shipping  Worldwide - On  All  Order  Over  $1000</span>
            <ul class="top_dao">
                <li><a href="">Store Locator </a> </li>
                <li>|</li>
                <li> <a href="">Track Orders</a></li>
                <li>|</li>
                <li><a href="">Credit Card</a> </li>
                <li>|</li>
                <li><a href="">English & dollar ﹀</a>  
                <div class="top_dao_1">
                    <p><a href="#">CANADA</a><span>USD</span></p>
                    <p><a href="#">BANGLADESH</a><span>TAKA</span></p>
                </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 搜索栏 -->
    <div class="sousuo">
        <div class="top_box">
            <div class="search_img">
                <img src="image/h1_logo.png" alt="">
            </div>
            <div class="search">
                <input type="search" placeholder="Search For Products...">
                <div class="scarch_l">
                    All Cotegories &nbsp;&nbsp;
                    <span> ﹀</span>
                        <ul> 
                            <li>All Cotegories</li>
                            <li>Lamps & Lighting</li>
                            <li>Mattress & Bedding</li>
                            <li>Housekeeping</li>
                            <li>Showpiece & Wall Art</li>
                        </ul>
                </div>
                <div class="scarch_r">
                    <div></div>
					
                </div>
            </div>
            <div class="search_cart">
				<img src="image/h1_sj.png" alt="" style="margin-left: -58px;">
				<img src="image/h1_sj.png" alt="">
                <img src="image/h1_sj.png" alt=""> &nbsp; $3550
                <div>3</div>
            </div>
        </div>
    </div>
  <!-- 导航栏 -->
  <div class="nav">
    <div class="top_box">
        <div class="nav_l">
            <span>Shop  By  Departements</span><span>﹀</span>
            <div>
                <ul>
                 <li><span>Lamps & Lighting</span><a href="">﹀</a></li>
                 <li><span>Mottress & Bedding</span><a href="">﹀</a></li>
                 <li><span>Home wares</span><a href="">﹀</a></li>
                 <li><span>Housekeeping</span><a href="">﹀</a></li>
                 <li><span>Showpiece & Wall Art </span></li>
                 <li><span>Dining & Cabinetry</span></li>
                 <li><span>Ceiling Light</span><a href="">﹀</a></li>
                 <li><span>Festive & Outdoor</span><a href="">﹀</a></li>
                 <li><span>Other Accessories</span></li>
                 <li><span>Comfoters & Sheets</span><a href="">﹀</a></li>
                </ul>
            </div>
        </div>
        <ul class="nav_r">
            <li> <span>Home&nbsp; ﹀</span> 
            <div>
                <ul>
                    <li>Home Furniture</li>
                    <li>Home Electronics</li>
                    <li>Home Fashion</li>
                </ul>
            </div>
            </li>

            <li><span>About Us</span> </li>
            <li><span>Shop &nbsp;﹀;</span> 
                <div>
                   <dl>
                    <dt>CATEGOBY 01</dt>
                    <dd>Furniture</dd>
                    <dd>fosion</dd>
                    <dd>Bags</dd>
                    <dd>Lather</dd>
                   </dl>
                   <dl>
                    <dt>CATEGOBY 02</dt>
                    <dd>Elactronice</dd>
                    <dd>fosion</dd>
                    <dd>Bags</dd>
                    <dd>Lather</dd>
                   </dl>
                   <dl>
                    <dt>CATEGOBY 03</dt>
                    <dd>Clack</dd>
                    <dd>fosion</dd>
                    <dd>Bags</dd>
                    <dd>Lather</dd>
                   </dl>
                   <dl>
                    <dt>CATEGOBY 04</dt>
                    <dd>Chair</dd>
                    <dd>fosion</dd>
                    <dd>Bags</dd>
                    <dd>Lather</dd>
                   </dl>
                </div>
            </li>
            <li><span>Pages&nbsp;﹀</span>
                <div>
                    <ul>
                        <li>Home Fashion</li>
                        <li>Home Furniture</li>
                        <li>Home Electronics</li>
                        <li>Home Fashion</li>
                        <li>Home Furniture</li>
                        <li>Home Electronics</li>
                        <li>Home Fashion</li>
                        <li>Home Furniture</li>
                        <li>Home Electronics</li>
                        <li>Home Fashion</li>
                    </ul>
                </div>
            </li>
            <li><span>Top Product</span></li>
            <li><span>Trending</span></li>
            <li><span>Elecktronics</span></li>
            <li><span>Furniture</span></li>
            <li><span>Blog&nbsp;﹀</span>
                <div>
                    <ul>
                        <li>Fashion</li>
                        <li>Furniture</li>
                        <li>Electronics</li>
                        <li>Fashion</li>
                        <li>Furniture</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--轮播图-->
<div class="banner">
    <ul class="imgBox">
        <li class="active"><img src="image/lbt1.png" alt=""></li>
        <li ><img src="image/lbt2.png" alt=""></li>
        <li ><img src="image/lbt3.jpg" alt=""></li>
        <li ><img src="image/lbt4.jpg" alt=""></li>
    </ul> 
    <ol>
        <li class="active" index="0"></li>
        <li index="1"></li>
        <li index="2"></li>
        <li index="3"></li>
    </ol>
    <div class="bannertext">
        <p class="bannertext_p1">End Season Sale</p>
        <p class="bannertext_p2">Wooden Furniture</p>
        <p class="bannertext_p3">Wide Rong Stort From<span><sup>$</sup>252.00</span></p>
        <p class="bannertext_p4">Start Buying</p>
    </div>
</div>
 <div class="tentcard">
    <div class="top_box">
        <div class="tentcard_s">
            <div class="tentcard_s_l">
               <h2>What Shopmax Offer ?</h2>
               <p>Lorem Ipsum is simply dummy texting of the printings and typesettingi amet industry.Simply<br/>
                Dummy has been the industy's standard dummy text ever since 1500s exting of the printing<br/>
                and typeesetting amet industry
               </p>
            </div>
            <div class="tentcard_s_r">
                <div>
                    <span>Easy & Free Return</span><br/>
                    <span>Money Guarantee</span>
                </div>
                <div>
                    <span>Easy & Free Return</span><br/>
                    <span>Money Guarantee</span>
                </div>
                <div>
                    <span>Easy & Free Return</span><br/>
                    <span>Money Guarantee</span>
                </div>
                <div>
                    <span>Easy & Free Return</span><br/>
                    <span>Money Guarantee</span>
                </div>
            
            </div>
        </div>
        <div class="tentcard_x">
            <div>
                <img src="image/lbt3.jpg" alt="">
                <div class="tentcard_x_text">
                <p class="t_x_t_p1">Solid Wooden Furniture</p>
                <p class="t_x_t_p2">40% Flate</p>
                <p class="t_x_t_p3">View Collection<span>&#xeb94;</span></p>
                </div>
            </div>
            <div>
                <img src="image/lbt5.jpg" alt="">
                <div class="tentcard_x_text">
                    <p class="t_x_t_p1">Ceiling Floor Lighting</p>
                    <p class="t_x_t_p2">50% Flate</p>
                    <p class="t_x_t_p3">View Collection <span>&#xeb94;</span></p>
                    </div>
            </div>
            
        </div>
    </div>
</div>
<!-- 选项卡 -->
		<div id="xxk">
			<div id="xxk_1">
				<li>Trending ltems</li>
				<li>Discounted Item</li>
				<li>Popular Product</li>
				<p>Discover All Products
					<span>&#xeb94</span>
				</p>
			</div>
			<div id="xxk_2" class="active">
				<div class="xxk_1">
					<img src="image/xxk4.png">
					<div class="xxk_2">
						<img src="image/xxk3.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk1.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk1.png">
					<div class="xxk_2">
						<img src="image/xxk3.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
			</div>
			<div id="xxk_2">
				<div class="xxk_1">
					<img src="image/xxk4.png">
					<div class="xxk_2">
						<img src="image/xxk3.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk1.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
			</div>
			<div id="xxk_2">
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk2.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk2.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk1.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk4.png">
					<div class="xxk_2">
						<img src="image/xxk3.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>

				</div>
				<div class="xxk_1">
					<img src="image/xxk3.png">
					<div class="xxk_2">
						<img src="image/xxk4.png">
					</div>
					<p>SAMSUN</p>
					<h5>Wireless Audioing Systems</h5>
					<h6>Purple Degree</h6>
					<hr>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_2"></div>
					<div class="xxk_1_1"></div>
					<div class="xxk_1_1"></div>
					<h4>$2.299.00</h4>
				</div>
			</div>
		</div>
		</div>
    <!-- 底部 -->
    <div id="dibu">
        <div id="tb">
            <div><img src="image/logo1.png" alt=""></div>
            <div><img src="image/logo2.png" alt=""></div>
            <div><img src="image/logo3.png" alt=""></div>
            <div><img src="image/logo4.png" alt=""></div>
            <div><img src="image/logo5.png" alt=""></div>
            <div><img src="image/logo6.png" alt=""></div>
            <div><img src="image/logo7.png" alt=""></div>
        </div>
        <div id="bk">
            <div id="ton"><img src="image/xx.png" alt=""><a href="">Subscribe for join uS!</a><span>...& receive $20 coupne for first Shopping & free delivery.</span></div>
            <div id="kdt"><p>&nbsp;&nbsp;&nbsp;&nbsp;Enter Your Emoi Address...<img src="image/dt.jpg" alt=""></p></div>
            <div id="ds"></div>
        </div>
        <div id="wz">
            <div id="cl">
                <dl id="dl_0">
                    <dt>Contoct lnformotion</dt>
                    <dd><img src="image/dht.png" alt=""></dd>
                   <dd>502 New Design Str. Melbourne.Austrolio</dd>
                   <dd>contoct@mortfury.co</dd>
                </dl>
            </div>
            <div id="gtku">
                <dl id="dl_1">
                    <dt>Get to Know Us</dt>
                    <dd><a href="">> &nbspAbout Us</a></dd>
                   <dd><a href="">> &nbspPress Releoses</a></dd>
                   <dd><a href="">> &nbspGift a Smile</a></dd>
                   <dd><a href="">> &nbspRetums Center</a></dd>
                </dl>
            </div>
            <div id="gtku_1">
                <dl id="dl_2">
                    <dt><br></dt>
                    <dd><a href="">> &nbspCoreers</a></dd>
                   <dd><a href="">> &nbspCort Cores</a></dd>
                   <dd><a href="">> &nbspYour Account</a></dd>
                   <dd><a href="">> &nbsp 100% Purchose Protection</a></dd>
                </dl>
            </div>
            <div id="gtku_2">
                <dl id="dl_3">
                    <dt>Get to Know Us</dt>
                    <dd><a href="">> &nbsp Focebook</a></dd>
                   <dd><a href="">> &nbsp Twitter</a></dd>
                   <dd><a href="">> &nbsp Instogrom</a></dd>
                   <dd><a href="">> &nbsp Youtube</a></dd>
                   <dd><a href="">> &nbsp Pintrest</a></dd>
                </dl>
            </div>
            <div id="luhy">
                <dl id="dl_4">
                    <dt>Let Us Help You</dt>
                    <dd><a href="">> &nbsp Your Account</a></dd>
                   <dd><a href="">> &nbsp Returns Center</a></dd>
                   <dd><a href="">> &nbsp 100% Purchose Protection</a></dd>
                   <dd><a href="">> &nbsp Cortbit App Downhood</a></dd>
                   <dd><a href="">> &nbsp Help</a></dd>
                </dl>
            </div>
        </div>
        <div id="hddb">
            <a.name="top"></a>
            <a href="#top"><img src="image/fhdb.png" alt=""></a></div>
    </div>
   
</body>
</html>

由于代码篇幅过长已上传到专栏源码里点击自行下载即可~

不明白的可以留言随时在~

结束啦🙇‍：

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!

📣以上内容技术相关问题😈欢迎一起交流学习💌嘉vx+18634371151 👇🏻👇🏻👇🏻