另一个问题。
尝试解决此问题：http://imgur.com/oXLboQx
基本上，1）如何在页面的左侧和右侧添加？如果我使用此代码
width: 800px; height: 805px;
-webkit-box-shadow: 4px 20px #222, -4px 0 20px #222;
-moz-box-shadow: 4px 0 20px #222, -4px 0 20px #222;
box-shadow: 4px 0 20px #222, -4px 0 20px #222;
阴影出现但网站粘在左角。如果我删除宽度选项，它也只是将阴影添加到白色背景。
2）有没有办法移动文本＆＃34; Spausk mane＆＃34;如图所示到底部？
3）是否有一些设置来修复垂直菜单？我尝试填充，显示：阻止，但白色底部边框不会随按钮拉伸。
谢谢
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
<title>Mokausi HTML, CSS ir JS</title>
</head>
<style>
/*visas css eina cia*/
body, html {
margin: 0;
padding: 0;
line-height: 19px;
font-size: 15px;
}
.cf:before,
/*clear fix klase*/
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
.tipoPaveiksliukas {
background: #fff;
width: 150px;
height: 140px;
display:inline-block;
margin: 0px 10px 13px 13px;
/*reikia papildyti cia bisky*/
}
.main {
position: relative;
width: 800px;
height: 855px;
margin: 0 auto;
background: #C6E070;
/*reikia papildyt*/
}
.kalbos {
position: absolute;
top: 0;
right: 10px;
background: #287D7D;
padding: 2px 5px;
color: #fff;
}
.kalbos:hover {
cursor: pointer;
}
.visosKalbos {
position: absolute;
top: 23px;
right: 10px;
background: #1C344C;
padding: 5px;
z-index: 10;
display: none;
}
.visosKalbos a {
display: block;
color: #fff;
text-decoration: none;
}
body {
background: #F2F2F2;
font-family:"Arial";
color: #1C344C;
}
.shadow {
}
.header {
margin-top:7px;
font-size:26;
font-style:italic;
}
.menu-horizontal-wrap {
margin: 10px 20px 5px 20px;
background-color: #287D7D;
padding:10px;
}
.menu-horizontal-wrap a {
color:#FFF;
text-decoration: none;
padding: 6px;
}
.menu-horizontal-wrap a:hover {
/*galite improvizuoti*/
background-color:gray;
}
.menu-horizontal-wrap a:last-child {
/*paskutinis virsutinio meniu elementas kazkoks kitoks*/
}
.col-left {
display:inline-block;
}
.col-right {
display:inline-block;
vertical-align:top;
width:600px;
}
.menu-vertical-wrap {
margin: 10px 20px 5px 20px;
background-color: #287D7D;
padding:4px;
}
.menu-vertical-wrap a {
color:#FFF;
text-decoration: none;
margin-top: 8px;
display:block;
border-bottom:1px solid white;
}
.menu-vertical-wrap a:hover {
/*galite improvizuoti*/
}
h1 {
}
.naujiena {
background:#99CC00;
margin-bottom: 20px;
padding-bottom: 5px;
}
a.cta {
color:white;
text-decoration: none;
}
a:hover.cta {
/*kas nutika kai uzvedate pele ant cta mygtuko, galite improvizuoti*/
}
.cta h3 {
background-color:#287D7D;
width: 150px;
height: 110px;
float:left;
margin: 0px 20px 10px 20px;
text-align: center;
position: relative;
bottom:0px;
left: 20px;
}
.lentele {
border-collapse: collapse;
border:1px solid black;
/*reikia papildyti*/
}
.lentele th {
background:black;
color:white;
}
.lentele td {
border:1px solid black;
}
.lentele tr {
background-color:#A8A8A8;
border:1px solid black;
}
.lentele tbody tr:nth-child(even) {
background-color: #D0D0D0;
}
.footer {
}
.text {
display:inline-block;
width:400px;
}
</style>
<body>
<div class="shadow">
<div class="main cf">
<div class="kalbos">Kalba</div>
<div class="visosKalbos"> <a href="#">Lietuviu</a>
<a href="#">English</a>
<a href="#">Pa Ruski</a>
</div>
<div class="header" align="center"> <b>MANO MOKOMASIS PUSLAPIS</b>
</div>
<div align="center" class="menu-horizontal-wrap"> <a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS </a>
</div>
<div class="cf">
<div class="col-left">
<div class="menu-vertical-wrap"> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br>
</div>
</div>
<!-- end of col-left -->
<div class="col-right">
<h1>NAUJIENOS</h1>
<hr size=1>
<div class="naujiena cf">
<div class="naujiena">
<div class="tipoPaveiksliukas"></div>
<div class="text">
<h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
</div>
</div>
</div>
<div class="naujiena cf">
<div class="naujiena">
<div class="tipoPaveiksliukas"></div>
<div class="text">
<h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.</div>
</div>
</div>
<div class="cta-wrap cf"> <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
<a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
<a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
</div>
<table width="550" style="text-align:center;" align="center" class="lentele">
<thead>
<tr>
<th>Antraste</th>
<th>Antraste</th>
<th>Antraste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Foo</td>
<td>Foo</td>
</tr>
<tr>
<td>Bar</td>
<td>Bar</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td>Foo</td>
</tr>
<tr>
<td>Bar</td>
<td>Bar</td>
<td>Bar</td>
</tr>
</tbody>
</table>
</div>
<!-- end of col-right -->
</div>
<!-- end of cf -->
<hr size=1>
<div align="center" class="footer">Mano labai kietas web'as © visos teises saugomos</div>
</div>
<!-- end of main -->
<script>
// reikia papildyti sita koda kad dar karta paspaudus ant kalbos mygtuko kalbu pasirinkimas uzsidarytu
var kalbuBusena = 'closed';
$('.kalbos').click(function(){
$('.visosKalbos').slideToggle('fast');
kalbuBusena = 'open';
});
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
1）Box-shadow可以使用逗号分隔多个参数，如下所示：
box-shadow: 0 2px 5px gray, 0 -2px 5px gray;
2）尝试：
position: absolute;
bottom: 0;
3）你是什么意思＆＃34;修复＆＃34;到底是什么？
答案 1 :(得分：0)
在绿色东西上使用css属性box-shadow
对于＆＃34; Spausk Mane＆＃34;，您可以使用line-height，margin-top甚至绝对定位文字。
对于菜单，您使用带下划线的文字，＆＃34;结果＆＃34;图片正在使用border-bottom。