Tôi đang thiết kế tiêu đề và có một vài câu hỏi về các vấn đề tôi có.Tôi gặp một số vấn đề khi thiết kế tiêu đề đáp ứng
demo is here và mã bên dưới, mọi trợ giúp sẽ được đánh giá cao.
.menu {
position: relative;
width: 100%;
height: 66px;
max-height: 90px;
background: green;
}
.menu img {
max-height: 30px;
}
.menu ul {
left: 0;
margin: 0 auto;
width: 80%;
margin: -30px auto 0 auto;
font-size: 16px;
font-weight: bold;
max-width: 1200px;
}
.menu ul li:first-child {
border-left: 1px solid gray;
}
.menu ul li {
//
width: 140px;
width: 14%;
display: block;
float: left;
text-align: center;
border-right: 1px solid gray;
color: white;
height: 50px;
line-height: 70px;
vertical-align: bottom;
}
.menu ul li a {
color: white;
}
.menubtn {
width: 30px;
height: 30px; //
opacity: 0.5;
cursor: pointer;
}
.menubtn .fa {
font-size: 26px;
color: rgb(75, 0, 130)
}
#menubtn {
position: absolute;
top: 2px;
left: 4px;
}
@media only screen and (min-width: 501px) {
.topbar {
display: none;
}
.menu ul li a {
font-size: 14px;
}
#mybody {
margin-top: 8%;
}
}
@media only screen and (max-width: 1200px) {
.menu ul li a {
font-size: 12px;
}
}
@media only screen and (max-width: 888px) {
.menu ul li a {
font-size: 12px;
}
}
@media only screen and (max-width: 685px) {
.menu {
height: 40px;
}
.menu ul {
margin: 0;
}
.menu img {
display: none
}
.menu ul {
width: 100%;
}
.menu ul li {
line-height: 40px;
height: 40px;
font-size: 13px;
}
}
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
.menu {
display: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {
.menu {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
</head>
<body>
<header>
<div class="container-fluid">
<div class="row" style="background-color: lightblue;">
<div class="col-md-8 col-sm-8 col-xs-1">
<div id="banner" style="margin-left: 59%;">
<img height="25px" width="25px" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
<img height="40px;" width="253px;" src="http://staticx.ibncollege.com/wcsstore/ExtendedSitesCatalogAssetStore/907_90722_1_21939/images/FULLIMAGE_88753.jpg" />
</div>
</div>
<div class="col-md-2">
<div id="images" style="float: right;">
<a class="btn btn-social-icon btn-sm btn-facebook" style="text-align: center;" href="#"> <i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-twitter" href="#"> <i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 search-container">
<form id="searchbox" role="form" action="#" method="GET">
<div class="col-md-4 col-sm-12 col-xs-12 searchbox">
<div class="ui-widget">
<input id="Name" name="name" class="form-control searchinput" type="text" placeholder="name" value="">
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<input id="family" name="family" class="form-control searchinput" type="text" placeholder="family" value="">
</div>
<div class="col-md-2 col-sm-2 col-xs-1">
<button style="background-color: blue; border-radius: 14px; border-style: solid;" class="btn-search" type="submit" title="Search">
<div style="background-color: blue;">
<span class="glyphicon glyphicon-search"></span>
</div>
</button>
</div>
</form>
<div style="float: right; text-align: right;" class="col-md">
<a href="#">Click1</a> <a href="#">Click2</a>
</div>
</div>
</div>
</div>
<div class="hidden-xs">
<div class="menu">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTnYmtXUnZ6g5TwfPndnVQMcVdJO8qkSJqm-dPkNRJ_13IaeTP6Pw" style="width: 100%; max-height: 40px;">
<ul id="idmenu">
<li><a href="#">Item1</a>
</li>
<li><a href="#">Item2</a>
</li>
<li><a href="#">Item3</a>
</li>
<li><a href="#">Item4</a>
</li>
<li><a href="#">Item5</a>
</li>
<li><a href="#">Item6</a>
</li>
<li><a href="#">Item7</a>
</li>
<li><a href="#">Item8</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>Con đường tôi muốn nó được là như sau:
Như bạn có thể thấy tôi có một logo ở phía bên phải của hộp tìm kiếm, đó là từ đầu trang đến cuối hộp tìm kiếm.
Biểu ngữ ở giữa, ba liên kết truyền thông xã hội và hai liên kết được đặt ở phía dưới bên phải của các liên kết truyền thông xã hội.
Tôi cũng có một hình ảnh màu trắng ở đầu trình đơn sẽ được thay thế bằng hình ảnh phù hợp.
(Tôi không tạo menu bằng cách sử dụng nav vì hình ảnh đó phải ở trên cùng của menu; vì vậy, tôi cũng gặp vấn đề với màn hình kích thước di động, do đó, hãy giúp thiết kế nav cũng sẽ được đánh giá)
tôi đã được yêu cầu thu hẹp yêu cầu,
tôi cần phải đặt logo ở vị trí đó được thể hiện trong ảnh chụp màn hình, chứ không phải nó ở đâu, (nó hiện đang ở phía bên trái của biểu ngữ - vui lòng nhấp vào liên kết 'demo là đây' để xem).
Cũng cần tạo trình đơn kiểu bánh hamburger cho màn hình thiết bị di động, vì tôi không sử dụng điều hướng, rất khó đạt được. Nếu bạn biết làm thế nào để giải quyết vấn đề với nav tôi sẽ đánh giá cao nó, vì bạn có thể thấy menu hiện tại không dựa trên nav.
Tôi cần phản hồi, vì vậy nếu bạn thực hiện bất kỳ thay đổi nào, tôi sẽ biết ơn nếu bạn có thể xem xét điều đó.
bạn thực sự muốn gì?một tiêu đề đáp ứng hay cái gì khác? cụ thể là –
@TanyaSinha thực sự tôi cần thiết kế đáp ứng giống như ảnh chụp màn hình. Tôi đã làm một số phần của nó nhưng có một vài vấn đề như bạn có thể thấy nó không giống như ảnh chụp màn hình được nêu ra. Lý do mà tôi đề cập đến vấn đề của tôi với màn hình điện thoại di động là dành cho những người sẽ đề nghị tôi sử dụng nav để biết lý do mà tôi đã không sử dụng nav. Vì vậy, nếu ai đó có một đề nghị tốt hơn tôi sẽ áp dụng. – Jack
Yếu tố cụ thể nào không phù hợp với những gì bạn đang làm và bạn đã thử những gì? Bạn không có bất kỳ câu hỏi thực tế nào được nêu ra, chỉ cần báo cáo và một bãi chứa những gì bạn có cho đến nay. Vui lòng thu hẹp nó xuống các câu hỏi cụ thể. –