HTML+；CSS阴影、垂直菜单、文本位置
另一个问题 尝试获取以下信息： 现在我有： 基本上，1）如何在页面的左侧和右侧添加？如果我使用这个代码HTML+；CSS阴影、垂直菜单、文本位置,html,css,menu,alignment,shadow,Html,Css,Menu,Alignment,Shadow,另一个问题 尝试获取以下信息： 现在我有： 基本上，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; 阴影将出现，
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;
<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>
Mokausi HTML，CSS ir JS
/*埃纳中央情报局*/
正文，html{
保证金：0；
填充：0；
线高：19px；
字体大小：15px；
}
.cf：之前，
/*清除固定klase*/
.cf：之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
.cf{
缩放：1；
}
tipoPaveiksliukas先生{
背景：#fff；
宽度：150px；
高度：140像素；
显示：内联块；
利润率：0px 10px 13px 13px；
/*瑞基亚·帕皮尔迪蒂·西娅·比斯基*/
}
梅因先生{
位置：相对位置；
宽度：800px；
身高：855px；
保证金：0自动；
背景：#C6E070；
/*瑞基亚·帕皮尔蒂特*/
}
卡尔博斯先生{
位置：绝对位置；
排名：0；
右：10px；
背景#287D7D；
填充物：2px 5px；
颜色：#fff；
}
卡尔博斯先生：悬停{
光标：指针；
}
维索斯卡尔博斯先生{
位置：绝对位置；
顶部：23px；
右：10px；
背景：#1C344C；
填充物：5px；
z指数：10；
显示：无；
}
维索斯卡尔博斯先生{
显示：块；
颜色：#fff；
文字装饰：无；
}
身体{
背景#f2f2；
字体系列：“Arial”；
颜色：#1C344C；
}
.影子{
}
.标题{
边缘顶部：7px；
字号:26 ;；
字体：斜体；
}
.菜单水平换行{
利润率：10px 20px 5px 20px；
背景色：#287D7D；
填充：10px；
}
.菜单水平换行a{
颜色：#FFF；
文字装饰：无；
填充：6px；
}
.菜单水平换行a：悬停{
/*即兴加利特*/
背景颜色：灰色；
}
.菜单水平换行a：最后一个子菜单{
/*病毒性百日咳*/
}
左上校{
显示：内联块；
}
上校：对{
显示：内联块；
垂直对齐：顶部；
宽度：600px；
}
.菜单垂直换行{
利润率：10px 20px 5px 20px；
背景色：#287D7D；
填充：4px；
}
.菜单垂直换行a{
颜色：#FFF；
文字装饰：无；
边缘顶部：8px；
显示：块；
边框底部：1px纯白；
}
.菜单垂直换行a：悬停{
/*即兴加利特*/
}
h1{
}
naujiena先生{
背景：#99CC00；
边缘底部：20px；
垫底：5px；
}
a、 cta{
颜色：白色；
文字装饰：无；
}
a:hover.cta{
/*如果你是我的朋友，我会改进的*/
}
.cta h3{
背景色：#287D7D；
宽度：150px；
高度：110px；
浮动：左；
利润率：0px 20px 10px 20px；
文本对齐：居中；
位置：相对位置；
底部：0px；
左：20px；
}
lentele先生{
边界塌陷：塌陷；
边框：1px纯黑；
/*瑞基亚帕皮尔蒂蒂酒店*/
}
lentele先生{
背景：黑色；
颜色：白色；
}
lentele博士{
边框：1px纯黑；
}
伦特尔先生{
背景色：#A8A8A8；
边框：1px纯黑；
}
lentele tbody tr：第n个孩子（偶数）{
背景色：#D0；
}
.页脚{
}
.文本{
显示：内联块；
宽度：400px；
}
卡尔巴
普氏莫诺烟雾病
纳吉诺斯
Naujienos antraste
Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯在显贵的拉克斯。香菇。车辆侵权前无明渠。维瓦摩斯·迪亚姆·奥奇，乌兰姆·科佩尔·埃利芬德，阿利奎特·阿库。红褐飞虱。红藤前庭。
Naujienos antraste
Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯在显贵的拉克斯。香菇。明渠
box-shadow: 0 2px 5px gray, 0 -2px 5px gray;
position: absolute;
bottom: 0;