Html+Css简易前端网站页面布局思路

祈璇

于 2024-06-25 10:52:00 发布

阅读量663

点赞数 14

文章标签：前端 html css

本文链接：https://blog.csdn.net/wcjlzyhd/article/details/139952156

版权

##实训周项目##

一、声明

代码框架来自《Web前端开发实训案例教程》，图片素材来源于网络，本人仅代码分享。

二、文件

主页面：index.html+index.css，附属跳转小页面：list1.html+list2.html，全局css：reset.css。

三、效果图

四、功能说明

顶部搜索框及按钮，装饰功能，没有js代码。

底部 [ 1 ] [ 2 ] 点击跳转，刷新附属子页面内容，四本书{图片，作者，书名，简介}。

导航栏覆盖变色。

五、源代码

[ index.html ]

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>小说网</title>
       <link rel="stylesheet" type="text/css" href="reset.css" />
       <link rel="stylesheet" type="text/css" href="index.css" />
   </head>
   <body>
       <header>
           <div class="container headBar">
               <div class="logo"></div>
               <nav>
                   <a href="#" class="navItem active">首页</a>
                   <a href="#" class="navItem">分类</a>
                   <a href="#" class="navItem">排行榜</a>
                   <a href="#" class="navItem">个性小说</a>
               </nav>
               <form class="search-wrap">
                   <input type="search" spellcheck="true" />
                   <button type="submit">搜索</button>
               </form>
           </div>
       </header>
       <article class="container">
           <div class="fiction-text">
               <h1>网站介绍</h1>
               <p>番茄小说是于2019年11月全新推出的面向网文热爱者的免费阅读产品，致力于为读者提供畅快不花钱的极致阅读体验，
                   每日活跃用户已超过一千万。番茄小说与各大内容商合作，拥有海量正版小说。同时持续扶持优质的原创内容，
                   涵盖青春、言情、玄幻、校园、仙侠、都市、悬疑等全部主流网文类型，以及大量热剧原著和经典出版物，并且支持用户免费看书、听书。</p>
           </div>

[ list1.html ]

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>小说网</title>
       <link rel="stylesheet" type="text/css" href="reset.css" />
       <link rel="stylesheet" type="text/css" href="list.css" />
   </head>
   <body>
       <section class="fictionBox">
           <article>
               <figure class="fictionImg">
                   <img src="凡骨.png" alt="凡骨"/>
               </figure>
               <div class="fictionInfo">
                   <h3>凡骨</h3>
                   <small class="fictionTip">
                       <mark>壹更大师</mark>
                   </small>
                   <p>
                       世间灵骨，共分四品。一品，天灵骨。二品，金灵骨。三品，玄灵骨。四品，白灵骨。
                       余者，皆为凡骨，无缘修行。一介凡骨许太平，誓要向这修行界证明，凡骨亦能斩妖，凡骨亦能除魔，凡骨亦能登仙！
                   </p>
               </div>
           </article>

           <article>
               <figure class="fictionImg">
                   <img src="仙武帝尊.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>仙武帝尊</h3>
                   <small class="fictionTip">
                       <mark>六道三界</mark>
                   </small>
                   <p>
                       九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。
                       九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。
                       这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。
                   </p>
               </div>
           </article>
           <article>
               <figure class="fictionImg">
                   <img src="逆天邪神.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>逆天邪神</h3>
                   <small class="fictionTip">
                       <mark>火星引力</mark>
                   </small>
                   <p>
                       掌天毒之珠，承邪神之血，修逆天之力，一代邪神，君临天下！
                   </p>
               </div>
           </article>
           <article>
               <figure class="fictionImg">
                   <img src="剑来.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>剑来</h3>
                   <small class="fictionTip">
                       <mark>烽火戏诸侯</mark>
                   </small>
                   <p>
                       大千世界，无奇不有。我陈平安，唯有一剑，可搬山，倒海，降妖，镇魔，敕神，摘星，断江，摧城，开天！
                   </p>
               </div>
           </article>
       </section>
   </body>
</html>

[ list2.html ]

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>小说网</title>
       <link rel="stylesheet" type="text/css" href="reset.css" />
       <link rel="stylesheet" type="text/css" href="list.css" />
   </head>
   <body>
       <section class="fictionBox">
           <article>
               <figure class="fictionImg">
                   <img src="十日终焉.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>十日终焉</h3>
                   <small class="fictionTip">
                       <mark>杀虫队队员</mark>
                   </small>
                   <p>
                       （不后宫，不套路，不无敌，不系统，不无脑，不爽文，介意者慎入。）
                       当我以为这只是寻常的一天时，却发现自己被捉到了终焉之地。当我以为只需要不断的参加死亡游戏就可以逃脱时，
                       却发现众人开始觉醒超自然之力。当我以为这里是「造神之地」时，一切却又奔着湮灭走去。
                   </p>
               </div>
           </article>

           <article>
               <figure class="fictionImg">
                   <img src="我不是戏神.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>我不是戏神</h3>
                   <small class="fictionTip">
                       <mark>三九音域</mark>
                   </small>
                   <p>
                       赤色流星划过天际后，人类文明陷入停滞。从那天起，人们再也无法制造一枚火箭，一颗核弹，一架飞机，
                       一台汽车……近代科学堆砌而成的文明金字塔轰然坍塌，而灾难，远不止此。灰色的世界随着赤色流星降临，
                       像是镜面后的鬼魅倒影，将文明世界一点点拖入无序的深渊。在这个时代，人命渺如尘埃；在这个时代，人类灿若星辰。
                       大厦将倾，有人见一戏子屹立文明废墟之上，红帔似血，时笑时哭，时代的帘幕在他身后缓缓打开，他张开双臂，
                   </p>
               </div>
           </article>
           <article>
               <figure class="fictionImg">
                   <img src="天渊.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>天渊</h3>
                   <small class="fictionTip">
                       <mark>沐潇三生</mark>
                   </small>
                   <p>
                       百年前，陈青源进入了一个名为天渊的禁区，魂灯熄灭，世人皆认为他死了。
                       今日，陈青源虽然活着走出了禁区，但是修为尽废，灵根断裂。面对红颜的悔婚，
                       各宗的欺压，陈青源该如何是好？ “陈青源，我给你两个选择：一，娶我;二......”
                       天渊内生活着一个红裙姑娘，眸若星辰，声音轻柔。 “我选择二。” 没等红裙姑娘说完话，陈青源毅然决然的做出了选择。
                   </p>
               </div>
           </article>
           <article>
               <figure class="fictionImg">
                   <img src="开局地摊卖大力.jpg"/>
               </figure>
               <div class="fictionInfo">
                   <h3>开局地摊卖大力</h3>
                   <small class="fictionTip">
                       <mark>弈青锋</mark>
                   </small>
                   <p>
                       地球进入灵气复苏时代，人类开启异能觉醒！江南开局觉醒最强地摊系统，大力药水？解毒小黄豆？幸运樱桃？供不应求！
                       世界顶级神豪、首富、人气主播、巅峰强者纷纷前来求购。江南：“我对钱亿点都不感兴趣！我只想坑……额，我的愿望是世界和平！”
                       新书《别叫我恶魔》火热连载中，已肥可宰。
                   </p>
               </div>
           </article>
       </section>
   </body>
</html>

[ index.css ]

a {
color: #333333;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
   height: 60px;
   background: linear-gradient(to right, red, orange);
   font-size: 1.2em;
}

.headBar {
display: flex;
align-items: center;
}

.logo {
   width: 160px;
   height: 30px;
   background: url(logo.png) no-repeat center;
   background-size: cover;
}

nav {
width: 600px;
}

.navItem {
   display: inline-block;
   line-height: 60px;
   padding: 0 20px;
   color: #ffffff;
}

.navItem .active {
background: #555555;
font-weight: 700;
}

.navItem:hover{
   /* ####### */
   background: #55557f;

}

.search-wrap input {
   border: 0;
   width: 15rem;
   line-height: 1.75rem;
   outline-style: none;
   padding-left: 0.625rem;
   border-radius: 5px;
}

.search-wrap button {
   width: 3.125em;
   height: 1.75rem;
   border: 0;
   background-color: #555555;
   color: #FFFFFF;
   border-radius: 5px;
}

.fiction-text {
   column-count: 2;
   column-gap: 40px;
   column-rule-style: solid;
   column-rule-width: 1px;
   padding: 0 70px;
   margin-top: 40px;

}

.fiction-text h1{
   column-span: all;
   text-align: center;
   margin-bottom: 20px;
}

.iframeWrap {
width: 100%;
overflow: hidden;
}

iframe {
width: 103%;
height: 450px;
}

.pageWrap {
overflow: hidden;
}

ul.page {
margin: 20px 0;
float: right;
}

ul.page li {
display: inline;
}

ul.page li a {
padding: 8px 16px;
border: 1px solid #CCCCCC;
}

ul.page li a:link {
color: #333333;
}

ul.page li a:visited {
color: #333333;
}

ul.page li a:hover {
color: #FB6638;
}

ul.page li a:active {
color: #FB6638;
}

footer{
   width: 100%;
   height: 50px;
   line-height: 50px;
   text-align: center;
   background-color: #E9E9E9;
}

footer a{
margin: 0 20px;
}

[ list.css ]

.fictionBox{
   border: 1px solid #CCCCCC;
   padding: 20px 20px 0;
   margin: 40px;
   display: flex;
   justify-content: space-between;
   align-content: center;
   flex-wrap: wrap;
}

.fictionBox article{
   width: 500px;
   height: 130px;
   display: flex;
   margin-bottom: 20px;
}

.fictionImg{
   width: 100px;
   height: 130px;
   box-shadow: 0 3px 4px rgba(0, 0, 0, .5);
}

.fictionImg img{
width: 100px;
height: 130px;
}

.fictionInfo{
   height: 140px;
   margin-left: 15px;
   overflow: hidden;
}

.fictionInfo h3{
margin-top: 5px;
}

.fictionTip{
font-size: 13px;
color: #555555;
}

.fictionTip span{
margin: 0 8px;
line-height: 35px;
}

[ reset.css ]

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

ul li {
list-style: none;
}