HTML博客页面上的CSS边框/背景问题
HTML博客页面上的CSS边框/背景问题
提问于 2015-05-21 09:28:36
我在我所有的HTML页面中都有一个基本的CSS文件，用圆角边框围绕文本。我只是在我的博客页面上遇到了麻烦；它有一个主要的博客部分，需要被它自己的框包围，还有一个旁注，它需要一个相同风格的单独框。目前，这个“盒子”已经覆盖了整个页面的宽度，我无法修复它(它在我的其他页面上工作得很好！)
HTML：
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<object width=100% data="nav.html"></object>
<title>SnapSnack - Blog</title>
<link href="css/reset.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootflat.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mikcss.css">
<script src="js/ie-emulation-modes-warning.js"></script>
</head>
<body role="document" style="padding-top:70px;">
<div class="bodyText">
<div class="container">
<div class="blog-header">
<h1 class="blog-title">SnapSnack Blog</h1>
<p class="lead blog-description">Welcome! Scroll down to check out our latest ideas. </p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<A NAME="healthtips">
<h2 class="blog-post-title">Cardiovascular Disease</h2>
<p class="blog-post-meta">April 26, 2015 by <a href="#">Mikaela</a></p>
<p>Why you need to be informed on one of Australia's major killers.</p>
<hr>
<blockquote>
<p>What is cardiovascular disease?</p>
</blockquote>
<p>Cardiovascular disease is a group of problems that occur when the heart and blood vessels aren't working the way they should. Some of these problems include: angina (chest pain when the heart isn’t getting enough blood), hardening of the arteries, heart attack, and stroke.</p>
<blockquote>
<p>What causes cardiovascular disease?</p>
</blockquote>
<p>Cardiovascular disease isn’t contagious, but different risk factors can increase your chance of heart disease. Smoking, high blood pressure, being overweight, heart healthy eating and lack of exercise are all risk factors you can take control of! Other risk factors include genetic predisposition and being older, which cannot be controlled.</p>
<blockquote>
<p>Wait, so only old people can get cardiovascular disease?! Why should I care? </p>
</blockquote>
<p>Cardiovascular disease is a major cause of death in Australia, affecting 1 in 6 people during their life, and killing one Australian every 12 minutes! True, the risk greatly increases after the age of 45, but getting into healthy habits NOW will decrease the likelihood of cardiovascular disease in the long run. Maintaining a healthy weight, eating heart healthy foods, not smoking and regularly exercising are all proven to greatly decrease your risk. Trust us, your heart and blood vessels will thank you later!</p>
</div>
<div class="blog-post">
<h2 class="blog-post-title">10 tips for getting exercise into your busy day:</h2>
<p class="blog-post-meta">April 26, 2015 by <a href="#">Mikaela</a></p>
<p>Heart.org has some great tips for getting more exercise into your busy day; ditch the excuses and get going!</p>
<hr>
<ol>
<li>Get out the leash and walk your dog. It’s a great activity for both man and man’s best friend. Your heart — and your pooch — will thank you!</li>
<li>Take your child for a brisk walk. It’s an excellent way to get some one-on-one time (or one-on-three, depending on the size of your brood.) Spice up your routine by exploring new neighbourhoods or turning your walk into a scavenger hunt.</li>
<li>Mall walk. Are you sweating (or shivering) at the idea of walking outside? Take a brisk stroll around your local mall instead. Window shop, people watch and give your heart a workout in a climate-controlled environment.</li>
<li>Join a team. Pick an activity you love and round up some friends. Team sports can be fun — and keep you motivated and accountable.</li>
<li>Walk and talk. Even if you’re glued to your phone for work calls, you don’t have to be glued to your seat. Make it a habit to talk and walk. Some workplaces have walking paths to make it even easier to burn while you earn.</li>
<li>Tune into fitness during TV time. Reject your inner couch potato. Walk, jog in place or use the treadmill at the gym while you watch your favourite 30-minute show.</li>
<li>Park and walk. How many times have you circled the parking lot to find “the” spot? Spare yourself the stress and gain more energy by parking far away (or even in a remote lot) and walking farther to your destination.</li>
<li>Take the stairs. The elevator may go up — but it doesn’t make your heart rate climb. Take the stairs instead. You may huff and puff at first, but over time, your body will thank you.</li>
<li>Dance! Do it in a ballroom, at a club or even in your living room. You’ll burn calories and gain a new hobby.</li>
<li>Skip the cake, say goodbye to pie and take a walk after dinner. You’ll get a reward that’s sweeter than dessert: more family time.</li>
</ol>
<p>If these ideas don’t work for you, find something that you enjoy. Ditching the excuses can be the first step to a healthier you. Of course, if you have an injury, talk to your doctor first to see if there’s a low-impact exercise you can do or find out if you should wait until you’re healed.</p>
</div>
<A NAME="recipes">
<h1>Recipes</h1>
<div class="blog-post">
<h2 class="blog-post-title">Mamma's Massaman Curry</h2>
<p class="blog-post-meta">April 27, 2015 by <a href="#">Mikaela</a></p>
<img src="massamancurry.jpg" alt="Massaman Curry" height = "300" Width = "650">
<h3>Ingredients</h3>
<p>Serves 4</p>
<ul>
<li>120 g Massaman Curry Paste</li>
<li>200 ml coconut water (see note)</li>
<li>400 ml strained pumpkin seed pumpkin seed milk (can also use others like almond, rice + soy)</li>
<li>400 ml vegetable stock</li>
<li>640 g Pumpkin - divided into 2 (see note)</li>
<li>120 g diced onion</li>
<li>40 g oven roasted cashew nuts, chopped</li>
<li>600 g of protein, cut into chunks (choose from chicken breast, prawns, organic tofu or tempeh, white fish) or alternatively just add more protein rich vegetables sources such as cooked lentils, green peas and mung bean.</li>
</ul>
<h3>Method</h3>
<p>Puree 320 g of the roasted pumpkin until smooth. Combine the Massaman Curry Paste with the coconut water, pumpkin seed milk, vegetable stock, pumpkin puree and diced onion. Simmer for about 10 minutes over a low heat until the mixture combines and starts to develop in flavour and consistency. The pumpkin puree helps to thicken the sauce.
Add half the required amount of additional seasonings and mix through.
Taste the sauce and adjust to your taste – adding more seasoning if necessary.
Add your choice of protein. For my version I’ve used a firm white fish.
Simmer for about 5-6 minutes or until the fish has cooked through.
Add the rest of the roasted pumpkin chunks to warm through if needed, making sure to be gentle whilst stirring to avoid breaking up the pumpkin. If your pumpkin is just out of the oven, you will not need to warm it, so just arrange into the bowls before serving.
Serve in bowls and divide the roasted pumpkin between the bowls.
Top with roasted cashew nuts and garnish with fresh garden herbs such as Thai basil, spring onion or coriander.
Serve immediately and enjoy.
</p>
<h4>Notes</h4>
<p>For a richer coconut texture use coconut milk in place of water.
Roasted sweet potato can be used in place of pumpkin.
</p>
<h4>Nutritional Information (using white fish)</h4>
<ul>
<li>Protein: 35 g</li>
<li>Total fat: 9.4 g</li>
<li>Saturated: 1.9 g</li>
<li>Carbs: 27 g</li>
<li>Sugars: 17 g</li>
<li>Sodium: 613 mg</li>
<li>Calories: 379</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4><A HREF="#recipes">Recipes</A></h4>
<h4><A HREF="#healthtips">Health Tips</A></h4>
<h4>About</h4>
<p>Here, you can view SnapSnack’s healthy lifestyle ideas and health information.</p>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="/js/docs.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>CSS：
body {
background-color: white;
}
.bodyText{
background-color: #FFFFF3;
border-radius: 15px;
width:auto;
margin:40 auto;
padding-top:5px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 5px;
}回答 1
Stack Overflow用户
发布于 2015-05-21 11:23:32
我不确定我是否理解您的意思，但也许您将样式应用到了错误的类。例如：如果您希望每个博客帖子周围都有圆角框，请改为应用于blog-post的.bodyText样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30363054
复制相关文章
相似问题
腾讯云开发者
