0
私はメディアのウェブサイトを作っています。どのような体の助けを借りて 私はこのCSSのデザインで、それが得ている ブラウザを小さくすると台無しに、私はすべてを試してみました。いずれにしても を助けてください。 Morever、私はそれを反応的にしたい、 私にいくつかのヒントを教えてくださいまたは使用する方法がある場合 ブートストラップ。cssに新しい列を追加して反応させる
<style>
@charset "utf-8";
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}
img {
height:auto;
}
/* ----------------------------------------------Wrapper------------------------------------- */
div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{ font-size:20px; font-weight:bold; line-height:normal;}
.col1{color:black;font-weight:bold; background-color:#eee;}
.col2{color:black;font-weight:bold; background-color:#eee;}
.col3{color:black;font-weight:bold; background-color:#eee; padding:20px 0; border-bottom:1px solid #839B05;}
.col4{color:black; font-weight:bold;background-color:#eee; border-bottom:1px solid #839B05;}
.col5{color:black;font-weight:bold; background-color:#ccc;}
.col6{color:black;font-weight:bold; background-color:#ccc; border-top:1px solid #839B05; border-bottom:1px solid #839B05;}
.col7, .col7 a{color:red; background-color:#151515;}
#containerssss, .gallery, #footersss, #copyright{display:block; position:relative;margin:0 auto;}
.gallery{padding:20px 0 30px 0; background-size: contain;}
.wrapper .gallery h2{display:block; text-align:center; margin:0 0 20px 0; padding:0; color:#2C2C2C; background-color:#ccc; font-size:86px; text-transform:uppercase; line-height:normal;}
.gallery ul{display:inline; margin:0; padding:0; list-style:none;}
.gallery ul li{display:block; float:left; margin:0 10px 10px 0;}
.gallery ul li img{padding:4px; border:1px solid #BFE009;}
.gallery ul li.last{margin-right:0;}
#containerssss{padding:10px 10px; }
#contentssss{display:block;border-right:1px solid #ccc; float:left; width:640px;}
#featured_post{margin-bottom:45px; }
#featured_post img{display:block; width:620px; height:270px; margin:0; padding:4px; border:1px solid #BFE009;}
#hpage_latest{display:block; width:100%; }
#hpage_latest ul{margin:0; padding:0; list-style:none; display:inline;}
#hpage_latest li{display:block; float:left; width:200px; margin:0 15px 0 0; padding:0;}
#hpage_latest li.last{margin-right:0;}
#hpage_latest img{margin:0; padding:4px; border:1px solid #BFE009;}
#hpage_latest .readmore{text-align:right;}
/* Comments */
#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
#comments .commentlist li.comment_odd{color:#CCCCCC; background-color:#333333;}
#comments .commentlist li.comment_odd a{color:#BFE009; background-color:#333333;}
#comments .commentlist li.comment_even{color:#CCCCCC; background-color:#1E1E1E;}
#comments .commentlist li.comment_even a{color:#BFE009; background-color:#1E1E1E;}
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
/* ----------------------------------------------Column------------------------------------- */
#column{display:block; float:right; width:300px; border-left:1px solid #eee;}
#column .holder{display:block; width:260px; margin-bottom:20px; padding-left:10px;}
#column .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
#column .holder p{line-height:1.6em;}
#column h2{font-size:20px;}
#column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
#column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
#column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
#column div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; border:1px solid #666666;}
/* Featured Block */
/* Homepage */
#column #latestnews{background-size: contain;display:block; width:100%; margin:0; padding:0; list-style:none;}
#column #latestnews li{background-size: contain;display:block; width:100%; min-height:99px; margin:0 0 25px 0; padding:0 0 15px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden;}
#column #latestnews li.last{padding-bottom:0; margin-bottom:0; border-bottom:none;}
#column #latestnews p{display:inline;}
#column #latestnews p strong{display:block; margin-bottom:5px;}
#column #latestnews img{float:left; margin:0 10px 0 0; padding:4px; border:1px solid #BFE009; clear:left;}
#columnss #latestnewssss{background-size: contain;display:block; width:100%; margin:0; padding:0; list-style:none;}
#columnss #latestnewssss li{display:block; width:100%; min-height:99px; margin:0 0 25px 0; padding:0 0 15px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden;}
#columnss #latestnewssss li.last{padding-bottom:0; margin-bottom:0; border-bottom:none;}
#columnss #latestnewssss p{display:inline;}
#columnss #latestnewssss p strong{display:block; margin-bottom:5px;}
#columnss #latestnewssss img{float:left; margin:0 10px 0 0; padding:4px; border:1px solid #BFE009; clear:left;}
#columnss{overflow:hidden; display:block; float:left; width:300px; margin-left:660px;margin-top:-770px;}
#columnss .holder{display:block; width:260px; margin-bottom:20px; padding-left:10px;}
#columnss .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
#columnss .holder p{line-height:1.6em;}
#columnss h2{font-size:20px;}
#columnss .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
#columnss .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
#columnss .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
#columnss div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; border:1px solid #666666;}
/* ----------------------------------------------footersss------------------------------------- */
#footersss{padding:30px 0;}
#footersss h2, #footersss p, #footersss ul, #footersss a{margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal;}
#footersss h2{padding:0 0 5px 0; color:#585858; background-color:#ccc; border-bottom:1px dotted #585858; font-size:16px; font-weight:bold; margin-bottom:20px;}
#footersss li{margin-bottom:15px;}
#footersss .footbox{display:block; float:left; width:210px; margin:0 40px 0 0; padding:0;}
#footersss .flickr li{display:block; float:left; width:80px; height:80px; margin:0 7px 15px 7px; padding:4px; border:1px solid #BFE009;}
#footersss .banners li{display:block; width:200px; height:150px; margin:0 0 15px 0; padding:4px; border:1px solid #BFE009;}
#footersss .last{margin:0;}
/* ----------------------------------------------Copyright------------------------------------- */
#copyright{padding:15px 0;}
#copyright p{margin:0; padding:0;}
</style>
<div class="wrapper col4">
<div id="containerssss">
<div id="contentssss">
<p>Featured News</p>
<div id="featured_post"><img src="images/demo/620x270.gif" alt="" />
<p>This is a W3C standards compliant free website template from <a href="http://www.os-templates.com/">OS Templates</a>.</p>
<p>This template is distributed using a <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more CSS templates visit <a href="http://www.os-templates.com/">Free Website Templates</a>.</p>
</div>
<div id="hpage_latest">
<ul>
<li><img src="images/demo/190x80.gif" alt="" />
<p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
<p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li><img src="images/demo/190x80.gif" alt="" />
<p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
<p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li class="last"><img src="images/demo/190x80.gif" alt="" />
<p>Nullamlacus dui ipsum conseqlo borttis non euisque morbipen a sdapibulum orna.</p>
<p>Urnau ltrices quis curabitur pha sellent esque congue magnisve stib ulum quismodo nulla et.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
</ul>
<br class="clear" />
</div>
</div>
<div id="column">
<p style="margin-left:10px;">Events</p>
<ul id="latestnews">
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li class="last"><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
</ul>
</div>
<br class="clear" />
<div id="columnss">
<p>Latest News</p>
<ul id="latestnewssss">
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
<li class="last"><img src="images/demo/80x80.gif" alt="" />
<p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque lobor ttis non euis que morbi penas dapi bulum orna. Urnaul trices quis curabitur.</p>
</li>
</ul>
</div>
<br class="clear" />