JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="widht-device-witdth, user-scaleble=no">
<title>Portal</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="topo">
<div class="topo-int">
<div class="topo-left">
<ul>
<li><a href="index.html" class="ativo">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Anuncie Aqui</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div class="topo-right">
<input type="image" src="images/search.png" border="0" width="26" height="26">
<input type="text" name="busca" class="topo-busca" placeholder="Busca..">
<a href="#"><img src="images/youtube.png" alt="" border="0" width="26" height="26"></a>
<a href="#"><img src="images/twitter.png" alt="" border="0" width="24" height="24"></a>
<a href="#"><img src="images/facebook.png" alt="" border="0" width="26" height="26"></a>
<a href="#"><img src="images/google.png" alt="" border="0" width="26" height="26"></a>
<a href="#"><img src="images/rss.png" alt="" border="0" width="26" height="26"></a>
</div>
</div>
</div>
<div class="topo2">
<div class="topo2-int">
<div class="logo">
<img src="images/Logo.png" border="0" width="230">
</div>
<div class="banner"></div>
</div>
</div>
<div class="menu">
<div class="menuint">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Economia</a></li>
<li>
<a href="">Entreterimento</a>
<img src="images/botao.png" border="0" width="10">
<div class="submenu">
<a href=""><div class="submenuitem">Submenu 1</div></a>
<a href=""><div class="submenuitem">Submenu 2</div></a>
<a href=""><div class="submenuitem">Submenu 3</div></a>
<a href=""><div class="submenuitem">Submenu 4</div></a>
</div>
</li>
<li>
<a...
CSS
*{
margin:0;
padding:0;
font-family: Arial;
font-size: 12px;
}
.topo{
height: 30px;
background-color: #333;
}
.topo-int{
width: 100%;
height:30px;
max-width:1040px;
margin: 0 auto;
}
.topo-left{
width: 50%;
height: 30px;
float: left;
}
.topo-left ul{
list-style: none;
}
.topo-left ul li{
float: left;
height: 30px;
line-height: 30px;
margin-left: 8px;
margin-right: 8px;
}
.topo-left ul li a{
text-decoration: none;
color: #fff;
}
.topo-left ul li .ativo{
color:blue;
}
.topo-right{
width:50%;
height: 30px;
float: right;
}
.topo-busca{
width: 110px;
height: 26px;
line-height: 30px;
}
.topo-right a{
float:right;
padding: 0;
}
.topo-right img{
margin-right: 3px;
margin-top: 2px;
}
.topo-right input{
float: right;
}
.topo2{
height: 95px;
}
.topo2-int{
width: 100%;
height:95px;
max-width:1040px;
margin:auto;
}
.logo{
width:230px;
height:85px;
float: left;
margin-top:6px;
}
.topo2 .banner{
width: 650px;
height: 80px;
float: right;
margin-top:7px;
margin-bottom:7px;
background-color: red;
}
.menu{
height: 40px;
background-color: #ff0000;
}
.menuint{
height: 40px;
width: 100%;
max-width: 1040px;
margin: auto;
}
.menu ul{
margin:0;
padding:0;
list-style-type: none;
}
.menu ul li{
float: left;
height: 40px;
line-height: 40px;
padding-right:8px;
padding-left: 8px;
}
.menu ul li:hover .submenu{
display: block;
}
.menu ul li a{
text-decoration: none;
color:white;
}
.submenu{
width: 150px;
position: absolute;
background-color: red;
display: none;
}
.submenuitem{
width: 140px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.submenuitem:hover{
background-color: #ff5555;
}
.ultimas-noticias{
height: 40px;
}
.ultimas-noticias-int{
height: 50px;
width: 100%;
max-width: 1040px;
margin: auto;
}
.ultnoticiasarea{
height: 28px;
background-color: white;
border:1px solid #ccc;
margin-top: 10px;
}
.ultnoticiastitulo{
background-color: red;
color:white;
height: 28px;
display:...
JavaScript
window.onload = function(){
var slideWidth = document.getElementById("slideshow").offsetWidth;
var objs = document.getElementsByTagName("slide");
for(var i in objs){
objs[i].style.width = slideWidth;
}
}