PC端固定布局[9]

2017年10月19日07:00:09 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.资讯内容

和首页一样,只不过这里,布局方式有所不同,具体如下:

PC端固定布局[9]

二.代码详解

//全部代码

<figure class="tour">
<img src="img/tour1.jpg" alt="PC端固定布局[9]" alt="曼谷-芭提雅 6 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅 6 日游</h2>
<h3>包团特惠,超丰富景点,升级 1 晚国五,无自费,赠送 600
元成人券...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>2864</strong>
<s>¥3980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour2.jpg" alt="PC端固定布局[9]" alt="马尔代夫 6 日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>马尔代夫 6 日自助游</h2>
<h3>双鱼岛 Olhuveli4 晚,上海出发,机+酒 包含:早晚餐+快
艇...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>8039</strong>
<s>¥9980</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>7.7 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour3.jpg" alt="PC端固定布局[9]" alt="海南双飞 5 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>海南双飞 5 日游</h2>
<h3>含盐城接送,全程挂牌四星酒店,一价全含,零自费“自
费项目”免费送...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>2709</strong>
<s>¥3280</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>6.5 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour4.jpg" alt="PC端固定布局[9]" alt="富山-大阪-东京 8 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>富山-大阪-东京 8 日游</h2>
<h3>暑期亲子,2 天自由,无导游安排自费项目,全程不强迫购
物...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9499</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">自助旅游</div>
<div class="disc"><span>8.8 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour5.jpg" alt="PC端固定布局[9]" alt="法瑞意德 12 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>法瑞意德 12 日游</h2>
<h3>4 至 5 星,金色列车,少女峰,部分 THE MALL...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9199</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>9.2 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="PC端固定布局[9]" alt="巴厘岛 6 日半自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>巴厘岛 6 日半自助游</h2>
<h3>蓝梦出海,独栋别墅,悦榕庄下午茶,纯玩...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>6488</strong>
<s>¥8460</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>7.6 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour7.jpg" alt="PC端固定布局[9]" alt="塞舌尔迪拜 9 日自助游">
<figcaption>
<article>
<header>
<hgroup>
<h2>塞舌尔迪拜 9 日自助游</h2>
<h3>一游两国,4 晚塞舌尔,2 晚迪拜,香港 EK 往返...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9669</strong>
<s>¥9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">游轮观光</div>
<div class="disc"><span>9.6 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour8.jpg" alt="PC端固定布局[9]" alt="花样姐姐土耳其 9 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>花样姐姐土耳其 9 日游</h2>
<h3>最高立减 3000!中餐六菜一汤+土耳其当地美食满足您挑
剔味蕾...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>9999</strong>
<s>9999</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">出境长线</div>
<div class="disc"><span>10 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour9.jpg" alt="PC端固定布局[9]" alt="大阪-京都-箱根双飞 6 日游">
<figcaption>
<article>
<header>
<hgroup>
<h2>大阪-京都-箱根双飞 6 日游</h2>
<h3>盐城直飞,不走回头路,境外无自费,超值之旅...</h3>
</hgroup>
</header>
<ol>
<li><mark>交通</mark> 春秋航空,杭州出发,无需转机</li>
<li><mark>团期</mark> 11/01、11/03、11/08...</li>
</ol>
<div class="buy">
<div class="price">¥<strong>5284</strong>
<s>8437</s></div>
<div class="reserve"><a href="###">立即抢购</a></div>
</div>
<div class="type">国内短线</div>
<div class="disc"><span>6.8 折</span></div>
<footer>本团游由瓢城旅行社赞助提供,截止于
<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<div class="more">加载更多...</div>

//CSS 部分

#container .tour {
    height: 230px;
    position: relative;
    border: 1px solid #eee;
    margin: 0 0 20px 0;
}
#container .tour img {
    float: left;
}
#container .tour figcaption {
    width: 528px;
    height: 230px;
    float: right;
}
#container .tour hgroup {
    width: 300px;
}
#container .tour h2 {
    font-size: 24px;
    font-weight: normal;
    padding: 10px 0 10px 25px;
    color: #333;
}
#container .tour h3 {
    font-size: 16px;
    padding: 10px 0 10px 25px;
    line-height: 1.5;
    font-weight: normal;
    color: #666;
}
#container .tour ol {
    padding: 0 0 0 25px;
    color: #666;
    line-height: 2;
}
#container .tour mark {
    padding: 0px 5px;
    border-radius: 4px;
    color: #458B00;
    border: 1px solid #458B00;
    background-color: #fff;
}
#container .tour .buy {
    position: absolute;
    top: 55px;
    right: 30px;
}
#container .tour s {
    font-size: 16px;
    color: #999;
}
#container .tour .price {
    font-size: 20px;
    color: #f60;
}
#container .tour strong {
    font-size: 36px;
}
#container .tour .reserve {
    margin: 10px 0 0 0;
}
#container .tour .reserve a {
    display: inline-block;
    width: 152px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: #f60;
    color: #fff;
    font-size: 20px;
    text-align: center;
}
#container .tour .type {
    width: 90px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-bottom-right-radius: 4px;
    background-color: #59b200;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
#container .tour .disc {
    width: 52px;
    height: 52px;
    background: url(../img/disc.png) no-repeat;
    position: absolute;
    top: 0;
    right: 0;
}
#container .tour .disc span {
    width: 52px;
    height: 52px;
    display: block;
    font-size: 14px;
    color: #ff7a4d;
    transform: rotate(45deg);
    text-indent: 7px;
    padding: 5px 0 0 0;
}
#container .tour footer {
    width: 528px;
    height: 35px;
    line-height: 35px;
    text-indent: 25px;
    color: #666;
    position: absolute;
    bottom: 0;
    background-color: #fafafa;
    letter-spacing: 1px;
}
#container .tour time {
    color: #458B00;
}
#container .list .more {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 18px;
    margin: 0 auto;
    cursor: pointer;
    background-color: #fafafa;
}

注:本章为第49课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: