文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用HTML5和CSS3设计带有广告投放的响应式网站？

问如何使用HTML5和CSS3设计带有广告投放的响应式网站？
EN

Stack Overflow用户
提问于 2015-09-14 16:14:47
回答 1查看 56关注 0票数 1

我正在尝试设计一个与广告放置(房子谷歌广告嵌入式HTML)的网站，将在全尺寸屏幕上显示有意义的，也在移动设备上。在前一种情况下(全尺寸)，广告将在任意文本上显示为向右浮动。在后一种情况下，广告将显示在文本的底部。文本通常是网站上的一些动态内容。

我的尝试是让这些广告放置(2个广告)包含在任意文本上方和下方的div中。

代码语言：javascript
复制
<div class="parent1">
   <div class="ad1">Ad 1 </div>
   <div class="ad2">Ad 2 </div>
</div>

<p> ......Text </p>
<div class="parent2">
   <div class="ad1">Ad 1 </div>
   <div class="ad2">Ad 2 </div>
 </div>

CSS3的媒体查询功能用于在屏幕宽度从移动屏幕尺寸切换到常规屏幕尺寸时隐藏和取消隐藏广告投放。简化宽度: 414px作为手机全屏的截止值)

代码语言：javascript
复制
@media (min-width: 0px) and (max-width: 414px){

.asideleft {
    margin-right: 0px;
}

.parent1 {
    display:none;
}
.parent2 {
    width: 300px;
    height: 500px;
    float: left;
    display:block;
    clear: none;
}
}

我是一个HTML和CSS的初学者。我的实现并不优雅，可能不是正确的实现方式，但我确实尝试让它尽可能简单。如果有任何关于更好方法的建议，我将不胜感激。

谢谢

肖恩

​

代码语言：javascript
复制
h1 {
	margin-left: 5%;
	margin-right: 2.5%;
	width: 30%;
	float: left;
	color: #F3ECED;
}
nav {
	margin-left: 5%;
	margin-right: 5%;
	background-color: #1D0606;
	color: #E9D4D5;
	float: none;
}

h2 {
	color: #F3EBEB;
	float: right;
}
p {
	color: #F4EDED;
	clear: left;
}
footer {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	margin-left: 5%;
	margin-right: 5%;
	float: left;
}
header {
	text-align: center;
}
img {
	width: 60px;
	height: 60px;
}


body {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size: 1em;
	background-image: url(images/header_bg.jpg);
	background-size: cover;
	background-attachment: fixed;
}


.asideleft {
}

.asideleft_more {
	margin-left: 2.5%;	
}

.parent1{
	width: 300px;
	height: 500px;
	float: right;
	clear: none;
}

.parent2 {
	display: none;
}

.ad1{
    width:300px;
	height:250px;
    background:blue;
}

.ad2{
    width:300px;
	height:250px;
    background:green;
}


@media (min-width: 414px){

}

@media (min-width: 0px) and (max-width: 414px){
	
.asideleft {
	margin-right: 0px;
}
.parent1 {
	display:none;
}
.parent2 {
	width: 300px;
	height: 500px;
	float: left;
	display:block;
	clear: none;
}
}
代码语言：javascript
复制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<header><img src="images/foo.png" width="80" height="80" alt=""/>
<nav>This is a Header</nav>
</header>

<aside class="asideleft">

<div class="parent1">
    <div class="ad1">Ad 1 </div>
    <div class="ad2">Ad 2 </div>
</div>
<aside class="asideleft_more">
  <h1 class="header_1">Sub Header</h1>
  <p>Altera molestiae eu quo. No duo porro postulant gubergren, veritus vocibus vituperata vis ut. Option voluptua nam no, vix malis iuvaret principes ut, ex dicunt aliquam vix. Noluisse senserit efficiendi ea nec, movet equidem consectetuer cum no. Pro id periculis mnesarchum interesset, munere legimus te eum. Libris quidam reprimique eum et. Illum quidam repudiandae no nam, sit no libris euismod. Dicta nostro has ea. Probatus referrentur instructior id eum.
Vel unum copiosae aliquando ne. Cu qui ignota mandamus deterruisset, an eum officiis conceptam. Vim et minim equidem, essent voluptaria assueverit vel et. Noster equidem sit ei, exerci labitur fabellas ut has. Mel modus electram ut, denique mediocrem qualisque eos id. Tamquam efficiantur cu vis, eu reque philosophia vix, an diam case soleat his.           
</p>
</aside>
<div class="parent2">
    <div class="ad1">Ad 1' </div>
    <div class="ad2">Ad 2' </div>
</div>
</aside>

<footer>This is a footer</footer>
</body>
</html>

​

responsive-design
EN

回答 1

Stack Overflow用户

发布于 2015-09-14 17:07:40

​

代码语言：javascript
复制
h1 {
	margin-left: 5%;
	margin-right: 2.5%;
	width: 30%;
	float: left;
	color: #F3ECED;
}
nav {
	margin-left: 5%;
	margin-right: 5%;
	background-color: #1D0606;
	color: #E9D4D5;
	float: none;
}

h2 {
	color: #F3EBEB;
	float: right;
}
p {
	color: #F4EDED;
	clear: left;
}
footer {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	margin-left: 5%;
	margin-right: 5%;
	float: left;
}
header {
	text-align: center;
}
img {
	width: 60px;
	height: 60px;
}


body {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size: 1em;
	background-image: url(images/header_bg.jpg);
	background-size: cover;
	background-attachment: fixed;
}


.asideleft {
}

.asideleft_more {
	margin-left: 2.5%;	
}

.parent1{
	/*width: 300px;
	height: 500px;
	float: right;
	clear: none;*/
	width: 40%;
	height: auto;
	clear: none;
	position: absolute;
	right: 0;
}

.parent2 {
	display: none;
}

.ad1{
    width:300px;
	height:250px;
    background:blue;
}

.ad2{
    width:300px;
	height:250px;
    background:green;
}


@media (min-width: 414px){

}

@media (min-width: 0px) and (max-width: 414px){
	
.asideleft {
	margin-right: 0px;
}
.parent1 {
	display:none;
}
.parent2 {
	width: 300px;
	height: 500px;
	float: left;
	display:block;
	clear: none;
}
}
代码语言：javascript
复制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<header><img src="images/foo.png" width="80" height="80" alt=""/>
<nav>This is a Header</nav>
</header>

<aside class="asideleft">

<div class="parent1">
    <div class="ad1">Ad 1 </div>
    <div class="ad2">Ad 2 </div>
</div>
<aside class="asideleft_more">
  <h1 class="header_1">Sub Header</h1>
  <p>Altera molestiae eu quo. No duo porro postulant gubergren, veritus vocibus vituperata vis ut. Option voluptua nam no, vix malis iuvaret principes ut, ex dicunt aliquam vix. Noluisse senserit efficiendi ea nec, movet equidem consectetuer cum no. Pro id periculis mnesarchum interesset, munere legimus te eum. Libris quidam reprimique eum et. Illum quidam repudiandae no nam, sit no libris euismod. Dicta nostro has ea. Probatus referrentur instructior id eum.
Vel unum copiosae aliquando ne. Cu qui ignota mandamus deterruisset, an eum officiis conceptam. Vim et minim equidem, essent voluptaria assueverit vel et. Noster equidem sit ei, exerci labitur fabellas ut has. Mel modus electram ut, denique mediocrem qualisque eos id. Tamquam efficiantur cu vis, eu reque philosophia vix, an diam case soleat his.           
</p>
</aside>
<div class="parent2">
    <div class="ad1">Ad 1' </div>
    <div class="ad2">Ad 2' </div>
</div>
</aside>

<footer>This is a footer</footer>
</body>
</html>

​

​

代码语言：javascript
复制
h1 {
	margin-left: 5%;
	margin-right: 2.5%;
	width: 30%;
	float: left;
	color: #F3ECED;
}
nav {
	margin-left: 5%;
	margin-right: 5%;
	background-color: #1D0606;
	color: #E9D4D5;
	float: none;
}

h2 {
	color: #F3EBEB;
	float: right;
}
p {
	color: #F4EDED;
	clear: left;
}
footer {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	margin-left: 5%;
	margin-right: 5%;
	float: left;
}
header {
	text-align: center;
}
img {
	width: 60px;
	height: 60px;
}


body {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size: 1em;
	background-image: url(images/header_bg.jpg);
	background-size: cover;
	background-attachment: fixed;
}


.asideleft {
}

.asideleft_more {
	margin-left: 2.5%;	
}

.parent1{
	width: 300px;
	height: 500px;
	float: right;
	clear: none;
}

.parent2 {
	display: none;
}

.ad1{
    width:300px;
	height:250px;
    background:blue;
}

.ad2{
    width:300px;
	height:250px;
    background:green;
}


@media (min-width: 414px){

}

@media (min-width: 0px) and (max-width: 414px){
	
.asideleft {
	margin-right: 0px;
}
.parent1 {
	display:none;
}
.parent2 {
	width: 300px;
	height: 500px;
	float: left;
	display:block;
	clear: none;
}
}
代码语言：javascript
复制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<header><img src="images/foo.png" width="80" height="80" alt=""/>
<nav>This is a Header</nav>
</header>

<aside class="asideleft">

<div class="parent1">
    <div class="ad1">Ad 1 </div>
    <div class="ad2">Ad 2 </div>
</div>
<aside class="asideleft_more">
  <h1 class="header_1">Sub Header</h1>
  <p>Altera molestiae eu quo. No duo porro postulant gubergren, veritus vocibus vituperata vis ut. Option voluptua nam no, vix malis iuvaret principes ut, ex dicunt aliquam vix. Noluisse senserit efficiendi ea nec, movet equidem consectetuer cum no. Pro id periculis mnesarchum interesset, munere legimus te eum. Libris quidam reprimique eum et. Illum quidam repudiandae no nam, sit no libris euismod. Dicta nostro has ea. Probatus referrentur instructior id eum.
Vel unum copiosae aliquando ne. Cu qui ignota mandamus deterruisset, an eum officiis conceptam. Vim et minim equidem, essent voluptaria assueverit vel et. Noster equidem sit ei, exerci labitur fabellas ut has. Mel modus electram ut, denique mediocrem qualisque eos id. Tamquam efficiantur cu vis, eu reque philosophia vix, an diam case soleat his.           
</p>
</aside>
<div class="parent2">
    <div class="ad1">Ad 1' </div>
    <div class="ad2">Ad 2' </div>
</div>
</aside>

<footer>This is a footer</footer>
</body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32560090

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档