#html #css
#HTML #css
Вопрос:
Я новичок в программировании, и у меня есть несколько вопросов. Я надеюсь, что кто-нибудь может помочь мне понять, что я сделал не так.
У меня есть изображение под текстом. Когда браузер имеет ширину 100%, он выглядит так, как и должен быть. Когда я изменяю размер браузера, чтобы проверить, реагирует ли он, изображение не перемещается одновременно с текстом и остается в середине страницы. Текст полностью адаптивный, все выглядит просто отлично, но это изображение сводит меня с ума. Что я могу сделать, чтобы увидеть изображение под текстом при изменении размера браузера?
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Alco - Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/alcotemplate.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Montserrat:400,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
<link rel="apple-touch-icon" href="images/webclip-slate.png">
</head>
<body>
<header class="navbar">
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-4 w-clearfix">
<img class="logo" src="images/logo.png" alt="53a187e6c2e6cb0d0ecbc4a3_logo.png">
</div>
<div class="w-col w-col-8 nav-column"><a class="nav-link" href="#">Home</a><a class="nav-link" href="#page-nav-share">About</a><a class="nav-link" href="#">Portfolio</a><a class="nav-link" href="#">Blog</a><a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</header>
<section class="w-container">
<h4>Blog</h4>
<img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam orci.</p>
</section>
<div class="w-container container">
<div class="blog">
<div class="border">
<img class="scale-with-grid" src="images/blogpost.png" />
<h5><a href="blog-post.html">Neque porro quisquam est qui lorem ipsum.</a></h5>
<h3>Our Team</h3>
<img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
<p>At vero eos et accusamus et iusto</p>
</div>
<div class="section grey footer"></div>
<img src="images/footer.png" alt="53a425b2eaa4a69a21bd719e_footer.png">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
Был бы очень признателен, если кто-нибудь сможет мне помочь.
Будем рады услышать от вас.
Комментарии:
1. Не могли бы вы дать нам какой-нибудь код (Css / Html) или, возможно, JSFiddle.. И покажите нам, что у вас есть / что вы уже пробовали
2. Нам действительно нужен код, который поможет вам…
3. <section class=»w-container»> <h4>Blog</h4> <img class=»image» src=»images/Untitled-1.png» alt=»53a1bc1164a4f9aa1001d86e_Untitled-1.png»> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam orci. </p> </section> Проблема в изображении под блогом <h4>. Я могу предоставить весь HTML-документ со страницы, если кому-то нужно посмотреть, что не так.
4. Если вы хотите, чтобы люди помогали вам здесь, вам придется следовать некоторым рекомендациям. Первый совет, который я могу вам дать: вместо того, чтобы писать свой код здесь, просто «Отредактируйте» свой вопрос. Чем больше деталей вы расскажете людям, тем больше помощи вы получите.
5. Добавьте свой CSS и HTML в исходный вопрос. Поскольку вы не можете отформатировать их в разделе комментариев.
Ответ №1:
Поскольку вы не предоставляете никакого кода, вам трудно помочь… Однако, что касается вашей текстовой ссылки с синим цветом и подчеркиванием, вы можете изменить все визуальные элементы ссылки с помощью css следующим образом:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Комментарии:
1. Спасибо, цвет был изменен. Но все равно подчеркнуто.
2. Вы просто скопировали мой блок кода в свою таблицу стилей css или добавили другие изменения, которые хотели? Я не могу сделать все за вас … это базовый CSS. Возможно, вы захотите изучить основы ит. Основы Css
Ответ №2:
Я предполагаю, что у вас возникла проблема с изображением при изменении размера браузера. Если это так, я рекомендую вам добавить max-width: 100%; к изображению, подобному этому — img{max-width: 100%;} .
И если это связано с синим цветом ссылки, вы можете добавить a тег привязки, а затем a{color:green;} указать, хотите ли вы изменить цвет ссылки глобально.
И если вы хотите убрать подчеркивание из якорей, тогда вам нужно написать a{text-decoration:none;} . Этот css удаляет подчеркивание со всех привязок по всему миру.
Если вы хотите добавить определенный css, добавьте конкретное имя класса или имя идентификатора перед привязкой. пример — .specificClassName a{/*your css*/} или #specificID a{/*your css*/}
Для лучшего решения, пожалуйста, предоставьте html-разметку и css, пожалуйста.