0
내 <div> 모양이 변경되었습니다.부트 스트랩이 내 파일에 추가되었을 때
내가 부트 스트랩을 추가 한 후 : 이것은 내가 부트 스트랩을 추가하기 전에 내 디자인이 모습입니다
내 레이아웃 HTML :
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<style>
@@import "@Url.Content("~/Content/admin.css")"
</style>
@RenderSection("Header",false)
</head>
<body>
<div class="kapsayici">
<div class="wrapper">
<ul class="menu">
<li class="anasayfa-m"><a href="">Anasayfa</a></li>
<li class="yazilar-m"><a href="">Yazılar</a></li>
<li class="kategoriler-m"><a href="">Kategoriler</a></li>
<li class="sayfalar-m"><a href="">Sayfalar</a></li>
<li class="gorunum-m"><a href="">Görünüm</a></li>
<li class="yorumlar-m"><a href="">Yorumlar</a></li>
<li class="kullanicilar-m"><a href="">Kullanıcılar</a></li>
</ul><br />
</div>
@RenderBody()
</div>
</body>
</html>
내 주요 HTML 페이지 :
<div class="yazilar"><span>Yazılar</span></div>
<div class="kategoriler"><span>Kategoriler</span></div>
<div class="sayfalar"><span>Sayfalar</span></div>
<div class="gorunum"><span>Görünüm</span></div>
<div class="yorumlar"><span>Yorumlar</span></div>
<div class="kullanicilar"><span>Kullanıcılar</span></div>
admin.css는 :
body {
overflow: hidden;
}
.kapsayici {
float: left;
padding-left: 18%;
width: 100%;
height: 100%;
}
.yazilar, .kategoriler, .sayfalar, .gorunum, .yorumlar, .kullanicilar {
float: left;
width: 20%;
height: 32.36%;
}
.wrapper ~ div {
font-family: Verdana;
}
div span {
float: left;
margin: 50% 35%;
}
.kategoriler, .sayfalar {
margin-left: 1%;
}
.gorunum {
margin-top: 1%;
clear: left;
}
.yorumlar, .kullanicilar {
margin-left: 1%;
margin-top: 1%;
}
.yazilar {
background:url(../Images/icons/yazılar.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.kategoriler {
background:url(../Images/icons/kategori.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.sayfalar {
background:url(../Images/icons/sayfalar.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.gorunum {
background:url(../Images/icons/theme.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.yorumlar {
background:url(../Images/icons/comments.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.kullanicilar {
background:url(../Images/icons/users.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.yazilar:hover {
background:url(../Images/icons/yazılar.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.kategoriler:hover {
background:url(../Images/icons/kategori.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.sayfalar:hover {
background:url(../Images/icons/sayfalar.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.gorunum:hover {
background:url(../Images/icons/theme.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.yorumlar:hover {
background:url(../Images/icons/comments.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.kullanicilar:hover {
background:url(../Images/icons/users.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
/* menü */
ul.menu {
width: 62%;
height: 11%;
list-style-type: none;
padding: 0;
margin: 0;
background-color: #e1e1e1;
font-family: Verdana;
font-size: 10px;
box-shadow: 0 1px 0 #e1e1e1;
}
ul.menu li {
float: left;
width: 13.14%;
height: 100%;
padding-right: 1%;
border-right: 1px solid #ccc;
box-sizing: border-box;
}
ul.menu li a {
position: relative;
top: 70%;
left: 27%;
color: #000;
}
ul.menu li:hover {
border-bottom: 3px solid #FFF;
}
ul.menu li.kategoriler-m a {
left: 23%;
}
ul.menu li.sayfalar-m a {
left: 31%;
}
ul.menu li.yazilar-m a {
left: 35%;
}
ul.menu li.yazilar-m {
background: url(../Images/icons/myazılar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kategoriler-m {
background: url(../Images/icons/mkategori.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.sayfalar-m {
background: url(../Images/icons/msayfalar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.gorunum-m {
background: url(../Images/icons/mtheme.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.yorumlar-m {
background: url(../Images/../Images/icons/mcomments.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kullanicilar-m {
border-right: none;
background: url(../Images/icons/musers.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li a {
text-decoration: none;
}
나는 <div> 중복이 문제가 발생할 수있는 찾을 시도했지만 난 아무것도 찾지 못했습니다. 사전에 도움을 주셔서 감사합니다.
바이올린 : 나는 크롬의 개발자 도구에 장난 제안 http://jsfiddle.net/MDGZ7/
당신이 만들 수 있습니다 (그러나 내 생각에 영구적 인 해결책이 아니다.) jsfiddle의 데모 – ndcweb
@ndcweb 미안 내가 jsfiddle에서 부트 스트랩을 추가 할 수 없기 때문에 미안하다. 부트 스트랩과 CSS를 모두 추가 할 수있는 방법이 있다면 데모를 만들 수 있습니다. –
jsfiddle에 부트 스트랩을 추가하는 방법이 있습니다. 왼쪽의 외부 리소스를 클릭하고 bootstrap.css 및 bootstrap.js에 대한 경로를 일부 CDN에서 추가하십시오. 불행히도 나는 지금 나가야 만하지만, 나중에 다른 사람이 도와주지 않으면 나중에 확인하겠습니다. – ndcweb